AngularJS:清除$ watch


277

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

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

但是,在某些情况下(在我的示例中,更改了我的单页应用程序的页面),我想停止监视(例如清除超时)。

我怎样才能做到这一点?

Answers:


520

$watch返回注销功能。调用它将取消注册$watcher

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

24
您是否知道在控制器生命周期结束时注销所有侦听器($on('$destroy')如上的)是一个好习惯,还是AngularJS会照顾好他们?谢谢!
2013年

81
观察镜销毁时,所有观察者都将被移走,您无需进行管理
UmurKontacı13-10-2

6
您可以在此处看到有趣的讨论来解释问题:github.com/angular/angular.js/issues/4574基本上,如果您将侦听器分配给$ rootScope,则必须取消分配您自己,否则它会一直存在$ scope更改。$ scope上的观察者会被$ scope破坏($ scopes在Angular中不是单例,它们会在需要时被创建和破坏)。
Mladen Danic 2014年

3
但是,如果我只希望观察者检查该值是否存在,然后在存在该值时进行一些更改,然后注销自己,我已经尝试过了-var listen = $ scope。$ watch('mvIdentity.currentUser',function(currentUser ){test = 1; console.log(“->” + $ scope.updateemail +“-” + test); listen();});
Harshit Laddha 2014年

4
@UmurKontacı实际上,死人的评论是完全有效的,因为您的原始评论并非在每种情况下都是正确的。
GFoley83 2014年

49

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

就像是:

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

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

14
是的,您可以在watchFn中解除绑定!简单的用例:您只想观看和执行一次watchFn,然后停止观看。
Mike Rapadas 2015年

3
调用unbind函数后是否可以重新绑定手表,就像再次调用它一样?
Bruno Finger

这很有用。在超时中执行unbindWatch在我的测试中似乎很重要。
eeejay 2015年

在这种情况下,您应该使用$ timeout,也可以注销它!
Ben Taliadoros

最好避免超时
Davi Lima

25

如果您想在发生某种情况后立即清除手表,也可以清除回调中的手表。这样,您的$ 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 () {});

4

理想情况下,离开示波器时,应删除所有定制手表。

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

// 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
});

4

如果观察者过多,需要清除所有观察者,则可以将它们推入数组并$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 = [];

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.