Angular Js Clear $watch

Question

Angular Js Clear $watch

I have a watch function at my Angular Js 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?

javascript
angularjs
watch

Answer 1

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

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

Answer 2

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

Answer 3

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 () {});

Answer 4

Call the function that $watch returns. it will unregister the watch listener. Just like the answer above.

Answer 5

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