Implementing Watches in a Controller
The code in Listings 8.1 and 8.2 demonstrate a simple example that implements the $watch, $watchGroup, and $watchCollection methods. The code in Listing 8.1 implements a controller that stores the values myColor, hits, and misses, as well as an object named myObj, in the scope. There are event handlers that update those values based on mouse clicks. Then in lines 18–25 the $watch, $watchGroup, and $watchCollection methods are implemented that adjust the object and a changes variable as the values change.
The code in Listing 8.2 implements an AngularJS template that enables the user to use the mouse to select the color and increment the hits and misses variables. The object and change values are displayed at the bottom, showing how the $watch methods detect and update changes to the scope. Figure 8.1 shows the rendered AngularJS web page.
Listing 8.1 scope_watch.js: Implementing $watch(), $watchGroup() and $watchCollection() Handlers to Watch the Value of Scope Variables
01 angular.module('myApp', [])
02 .controller('myController', function ($scope) {
03 $scope.mColors = ['red', 'green', 'blue'];
04 $scope.myColor = '';
05 $scope.hits = 0;
06 $scope.misses = 0;
07 $scope.changes = 0;
08 $scope.myObj = {color: '', hits: '', misses: ''};
09 $scope.setColor = function (color){
10 $scope.myColor = color;
11 };
12 $scope.hit = function (){
13 $scope.hits += 1;
14 };
15 $scope.miss = function (){
16 $scope.misses += 1;
17 };
18 $scope.$watch('myColor', function (newValue, oldValue){
19 $scope.myObj.color = newValue;
20 });
21 $scope.$watchGroup(['hits', 'misses'], function (newValue, oldValue){
22 $scope.myObj.hits = newValue[0];
23 $scope.myObj.misses = newValue[1];
24 });
25 $scope.$watchCollection('myObj', function (newValue, oldValue){
26 $scope.changes += 1;
27 });
28 });
Listing 8.2 scope_watch.html: HTML Template Code That Provides the View and Interactions with the Scope and Controller Defined in Listing 8.1
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS Scope Variable Watch</title>
05 <style>
06 </style>
07 </head>
08 <body>
09 <h2>Watching Values in the AngularJS Scope</h2>
10 <div ng-controller="myController">
11 Select Color:
12 <span ng-repeat="mColor in mColors">
13 <span ng-style="{color: mColor}"
14 ng-click="setColor(mColor)">
15 {{mColor}}</span>
16 </span><hr>
17 <span ng-click="hit()">[+]</span>
18 Hits: {{hits}}<br>
19 <span ng-click="miss()">[+]</span>
20 misses: {{misses}}<hr>
21 Object: {{myObj|json}} <br>
22 Number of Changes: {{changes}}
23 </div>
24 <script src="http://code.angularjs.org/1.3.0/angular.min.js"></script>
25 <script src="js/scope_watch.js"></script>
26 </body>
27 </html>
Figure 8.1 Using $watch(), $watchGroup(), and $watchCollection() handlers to watch the value of scope variables.