AngularJS：清除 $watch答案

【问题标题】：AngularJS : Clear $watchAngularJS：清除 $watch
【发布时间】：2013-02-04 03:23:59
【问题描述】：

我的 AngularJS 应用程序中有一个监视功能。

$scope.$watch('quartzCrystal', function () {
   ...
}

但是，在某些情况下（在我的示例中，更改我的single-page application 的页面）我想停止那个手表（就像清除超时一样）。

我该怎么做？

【问题讨论】：

标签： javascript angularjs watch

【解决方案1】：

$watch 返回一个注销函数。调用它会注销$watcher。

var listener = $scope.$watch("quartz", function () {});
// ...
listener(); // Would clear the watch

【讨论】：

您知道在控制器生命周期结束时（例如在$on('$destroy') 上）取消注册所有侦听器是否是一种好习惯，还是 AngularJS 会处理它们？谢谢！
作用域被销毁时，所有的观察者都会被移除，你不需要管理那些
你可以在这里看到一个有趣的讨论来解释这个问题：github.com/angular/angular.js/issues/4574 基本上，如果你为 $rootScope 分配一个监听器，你必须自己取消分配它，否则它将持续到 $scope变化。 $scope 上的观察者会被 $scope 销毁（$scope 不是 Angular 中的单例，它们会在需要时创建和销毁）。
但是，如果我只希望观察者检查值是否存在，然后当它存在时做一些更改，然后注销自己我已经尝试过 - var listen = $scope.$watch(' mvIdentity.currentUser', function(currentUser) { test = 1; console.log("--> " + $scope.updateemail + " -- " + test); listen(); });
@UmurKontacı 实际上，deadman 的评论是完全有效的，因为您的原始评论并非适用于所有情况。

【解决方案2】：

scope.$watch 返回一个您可以调用的函数，该函数将取消注册手表。

类似：

var unbindWatch = $scope.$watch("myvariable", function() {
    //...
});

setTimeout(function() {
    unbindWatch();
}, 1000);

【讨论】：

是的，您可以在 watchFn 中解除绑定！简单用例：您只想观看并执行一次 watchFn，然后停止观看。
我调用unbind函数后是否可以重新绑定手表，就像再次调用它一样？
这很有用。在我的测试中，超时执行 unbindWatch 似乎很重要。
在这种情况下你应该使用$timeout，你也可以取消注册！
最好避免超时

【解决方案3】：

如果你想在事情发生后立即清除它，你也可以在回调中清除手表。这样，您的 $watch 将在使用前保持活动状态。

就这样……

var clearWatch = $scope.$watch('quartzCrystal', function( crystal ){
  if( isQuartz( crystal )){
    // do something special and then stop watching!
    clearWatch();
  }else{
    // maybe do something special but keep watching!
  } 
}

【讨论】：

【解决方案4】：

有时您的 $watch 正在调用 dynamically 并且它会创建它的实例，因此您必须在您的 $watch 函数之前调用注销函数

if(myWatchFun)
  myWatchFun(); // it will destroy your previous $watch if any exist
myWatchFun = $scope.$watch("abc", function () {});

【讨论】：

【解决方案5】：

理想情况下，当您离开作用域时，应该移除每个自定义手表。

它有助于更好的内存管理和更好的应用性能。

// call to $watch will return a de-register function
var listener = $scope.$watch(someVariableToWatch, function(....));

$scope.$on('$destroy', function() {
    listener(); // call the de-register function on scope destroy
});

【讨论】：

【解决方案6】：

如果观察者过多，需要清除所有观察者，可以将它们推入一个数组并循环销毁每个$watch。

var watchers = [];
watchers.push( $scope.$watch('watch-xxx', function(newVal){
   //do something
}));    

for(var i = 0; i < watchers.length; ++i){
    if(typeof watchers[i] === 'function'){
        watchers[i]();
    }
}

watchers = [];

【讨论】：