AngularJS Watch function ($watch())

$watch in AngularJS

  • The $scope object has a function $watch() that’s used to register a watcher.
  • Then our controller BookController can be modified as following:

    See the Pen AngularJS Watch 1 by Vishal Srinivasan (@vishal_srini) on CodePen.0

    We added a new model wishListCounter to the BookController scope.

  • The first parameter is watchExpression.This can be the model under watch or a function.
  • The second parameter is a callback function that’s called whenever AngularJS detects a change in the model value or the return value of the passed function.
  • This may seem a little odd, but AngularJS executes the listener function as soon as the watcher is registered.

A simple and elegant way to understand what $watch() function does. It shows how to create and unbind a watcher. Unbinding is needed because it will clean..

@Vishal_Srini: $watch in AngularJS

A watcher monitors model changes and takes action in response. The $scope object has a function $watch() that’s used to register a watcher. Let’s modify our previous snippet. We want to give users the ability to add a book to their wish list. But once they add two books to their wish list we want to show a congratulatory message. So, we can keep a counter and, each time the user clicks on Add to wishlist link, we will increment this counter by one. But how do we know when the counter reaches two? This is where watchers help us. We can set up a watcher on the counter model to notify us when the value changes. So, if its value is two then we fire an alert. The modified HTML for this is shown below:

Note that I’m only showing

for the sake of brevity. Then our controller BookController can be modified as following:

We added a new model wishListCounter to the BookController scope. Each time user clicks Add to wishlist link $scope.hide() gets called, incrementing the model by one. Now let’s get to the interesting part—setting up a watcher. $scope.watcher() is whatyou need to dothis. The first parameter is watchExpression.This can be the model under watch or a function. The second parameter is a callback function that’s called whenever AngularJS detects a change in the model value or the return value of the passed function. This callback takes two parameters. The first is the new value of the model, while the second is the old value. If you’re interested only in the new value you can skip the second parameter. Now inside the watch callback (also called listener function) we check to see if the newValue is two. If it is we show an alert. We also have a console.log() so we can see how many times the listener function gets called. The Listener is Called Immediately When you load the page you’ll find that the listener function is called immediately. This may seem a little odd, but AngularJS executes the listener function as soon as the watcher is registered. If you don’t want this to happen, you can insert an additional check to see if the newValue and oldValue are same. If that’s the case, then this will be the first time the listener is called as a part of initialization. You can write something like this:

However, the second parameter to $watch() is optional. But, why would anyone want to have a watcher without a listener? We’ll discuss that in the next section. The $watch() function also accepts an optional third parameter objectEquality. In this case we’re watching a simple String. But sometimes you may need to watch an object for change. We want to be notified whenever any of the object’s properties changes. In that case the above code won’t work because AngularJS will compare the objects by reference. To make this work we can pass true as the third argument to $watch() function. This will compare individual properties of the object under watch and call our listener in case of mutation.

The return value of $scope.$watch() is a function which can be used to unbind the watcher when needed. This is important because it clears the memory alloted to the watcher. So, after showing the alert if you want to unbind the watcher you can utilize this return value. The corresponding code is:

AngularJS Watch function ($watch())

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.