In this video Iftach Bar shows the simple usage of the built-in function $watch and explains how to use it in the most straight-forward way.
- [Instructor] Now that we understand how scope inheritance work, let's go deeper and learn how the angular two way binding mechanism work. First I'll introduce you to a very important scope built in method called $watch. The $watch method can be used when you want to check if a certain value has changed and ran some code when it changes. Let's have a look at our code. This time I'll focus on the playground controller. I'm going to add a watch statement here in the end of the controller.
I'm going to route $scope.$watch, I'm going to give the $watch function some arguments. The first argument will be a string that represents an expression to run on $scope, for example, If I want to watch the first variable, I'll have to write in the string, vm.force. Notice this expression is identical to the expressions we put on double curly braces when you want to bind something into our dome like here on line 13 when you wanted to bind the force variable into the dome.
Let's go back to the controller and continue writing the watch function. So the first argument to the $watch function was the expression we wanted to watch. The second variable will be a function that will run whenever the value of the force variable will change. I'm going to write a function that just prints to the console whenever the force variable changes. So I'm going to add a console log statement here and I'm going to say, force value has changed and I'm going to add the value of the force.
Now let's go back to the browser and refresh the page. And let's open the developer tools in Google Chrome. To open, I'll go to the menu, I'll go to More Tools and I'm going to click Developer Tools. I can also use the shortcut Alt + Command I. Now notice that whenever I change the value of the input field, I get a new notification in the log that says the new value of the input field. Also notice that if I click the Reset button, I also get a notification that the value of the force is now zero.
And if I'll click the button again, I won't get another notification and that is because the value of force hasn't changed even though we have an assignment in our code whenever I click the Reset button. The function that we use as the second argument for $watch can also get two arguments. It can get new value and old value and I can use those arguments in my function to perform whatever logic I want. The new value will be, obviously, the new value of the force and the old value will be the old value of the force before we changed it.
Let's write these values to the log as well. I'll go back to the app and notice what happens when I change the value of the force We can see the first argument was the new value and the second argument was the old value. So whenever I change the value, I'll get those two arguments ready in place.
This advanced AngularJS course helps you explore the connected worlds of $scope and the digest cycle. Instructor Iftach Bar explains scope and inheritance, goes behind the scenes of the digest loop, and teaches both manual and automatic data binding approaches. Plus, learn how to integrate external libraries, diagnose performance issues, and debug your applications.
- $scope and controllers
- $scope built-in variables and methods
- $scope prototype inheritance
- Manual data binding with $scope.$watch
- The digest loop
- Get the $scope in the console
- Forcing $digest