AngularJS : Clear $watch

Question

I have a watch function in my AngularJS application.

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

However, after some condition (in my example, changing the page at my single-page application) I want to stop that watch (as like clearing timeout).

How can I do that?

score 530 · Accepted Answer · edited Sep 12 '15 at 14:10

530

$watch returns a deregistration function. Calling it would deregister the $watcher.

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

edited Sep 12 '15 at 14:10

Peter Mortensen

30,738
21
105
131

answered Feb 19 '13 at 12:37

Umur Kontacı

35,403
8
73
96

25

Do you know if it's a good practice to deregister all your listeners at the end of a controller lifecycle (like on a `$on('$destroy')`) or AngularJS will take care of them? thanks! – yorch Oct 02 '13 at 17:36
84

All watchers will be removed when the scope is destroyed, you don't need to manage those – Umur Kontacı Oct 02 '13 at 20:03
@UmurKontacı - do you have a source for your claim that when a scope is destroyed the watchers are removed? It does not appear to be part of the [`$destroy` function](https://github.com/angular/angular.js/blob/cceb455fb167571e26341ded6b595dafd4d92bc6/src/ng/rootScope.js#L693) – jelinson Feb 16 '14 at 18:44
7

You can see an interesting discussion here that explains the matter: https://github.com/angular/angular.js/issues/4574 Basically, if you assign a listener to the $rootScope, you have to unassign it your self, or it will persist through $scope changes. Watchers on $scope get destroyed with the $scope ($scopes are not singletons in Angular, and they get created and destroyed when needed). – Mladen Danic Mar 12 '14 at 09:46
3

But, what if i only want the watcher for checking if the value exists and then when it exists do some changes and then de register itself i already tried - var listen = $scope.$watch('mvIdentity.currentUser', function(currentUser) { test = 1; console.log("--> " + $scope.updateemail + " -- " + test); listen(); }); – Harshit Laddha Jun 22 '14 at 05:28
4

@UmurKontacı Actually deadman's comment is perfectly valid as your original comment is not correct for every case. – GFoley83 Jul 21 '14 at 22:08
1

Note: $scope.$$watchers contains all the watches on a particular scope. It is dangerous but you can manipulate them. Courtesy: https://coderwall.com/p/d_aisq – Sanket Sahu Oct 02 '14 at 10:14
1

Note: `$scope.$$watchersCount` helps a lot for debugging. – Ice-Blaze Nov 04 '15 at 14:31

score 49 · Answer 2 · answered Feb 19 '13 at 12:37

49

scope.$watch returns a function that you can call and that will unregister the watch.

Something like:

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

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

answered Feb 19 '13 at 12:37

Anders Ekdahl

22,685
4
70
59

14

Yes, you're able to unbind within the watchFn! Simple use-case: you want to watch and execute the watchFn only once, then stop watching. – Mike Rapadas Jan 04 '15 at 12:30
3

Am I able to rebind the watch after I call the unbind function, like calling it again? – Bruno Finger Nov 12 '15 at 11:38
This was useful. Doing the unbindWatch in a timeout seems important in my testing. – eeejay Nov 21 '15 at 17:12
In this case you should use $timeout, which you can also de-register! – Ben Taliadoros Sep 08 '16 at 09:07
Best to avoid timeouts – Davi Lima Jun 07 '17 at 14:04

SoEzPz · Answer 3 · 2015-08-07T21:41:41.047

26

You can also clear the watch inside the callback if you want to clear it right after something happens. That way your $watch will stay active until used.

Like so...

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!
  } 
}

edited Aug 07 '15 at 21:41

answered Jul 23 '15 at 20:53

SoEzPz

14,958
8
61
64

score 4 · Answer 4 · answered May 18 '15 at 10:00

Some time your $watch is calling dynamically and it will create its instances so you have to call deregistration function before your $watch function

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

score 4 · Answer 5 · edited Feb 08 '18 at 11:53

4

If you have too much watchers and you need to clear all of them, you can push them into an array and destroy every $watch in a loop.

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 = [];

edited Feb 08 '18 at 11:53

Danilo Cândido

408
1
5
18

answered Aug 31 '16 at 13:19

Rewar

74
6

score 4 · Answer 6 · answered Sep 19 '17 at 09:03

Ideally, every custom watch should be removed when you leave the scope.

It helps in better memory management and better app performance.

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

AngularJS : Clear $watch

6 Answers6

Linked