AngularJS系统学习之$watch（监控）

在scope的内置的所有函数中，用的最多的可能就是$watch函数了，当你的数据模型中某一部分发生变化时，$watch函数可以向你发出通知。你可以监控单个对象的属性，亦可以监控需要经过计算的结果（函数），实际上只要能够被当做属性访问到，或者可以当做一个Java函数被计算出来，就可以被$wacth函数监控。它的函数签名为：

$watch (watchFn, watchAction, deepWatch)

其中watchFn

这个参数是一个带有Angular表达式或者函数的字符串，它会返回被监控函数的数据模型的当前值。

　　watchAction

这是一个函数表达式，当watchFn发生变化时会被调用。

　　deepWatch

如果设置为true，这个可选的布尔型参数将会命令Angular去检查被监控对象的每个属性是否发生了变化。若果你想要监控数组中的元素，或者对象上的所有属性，而不只是监控一个简单的值，就可以设置为true。

写了一个小例子，大家可以看看。

 1 <!DOCTYPE>
 2 <html ng-app='myApp'>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Your Shopping Cart</title>
 6     <script src="../../../vendor/angular/angular.js"></script>
 7     <script src="../../../vendor/angular/angular-route.js"></script>
 8 </head>
 9 <body ng-controller='CartController'>
10 <h1>Your order</h1>
11 
12 <div ng-repeat="item in items">
13     <span>{{item.title}}</span>
14     <input ng-model='item.quantity'>
15     <span>{{item.price | currency}}</span>
16     <span>{{item.price * item.quantity | currency}}</span>
17     <div>Total:{{totalCart()}}</div>
18     <div>Discount: {{bill.discount}}</div>
19     <div>Subtatal: {{subtotal()}}</div>
20 </div>
21 
22 <script>
23     var myAppMoudle = angular.module('myApp', []);
24     myAppMoudle.controller('CartController', ['$scope', function ($scope) {
25         $scope.bill={};
26         $scope.discount = 2;
27         $scope.items = [{title: 'paint', quantity: 8, price: 3.95},
28             {title: 'pa', quantity: 7, price: 3.95},
29             {title: 'paa', quantity: 17, price: 3.95},
30             {title: 'paaa', quantity: 177, price: 3.95}];
31         $scope.totalCart = function () {
32             var total = 0;
33             for(var i = 0, len = $scope.items.length; i < len; i++){
34                 total = total + $scope.items[i].price * $scope.items[i].quantity;
35             }
36             return total;
37         }
38 
39         $scope.subtotal = function () {
40             return $scope.totalCart() - $scope.discount;
41         };
42 
43         function calculateDiscount(newValue, oldValue, scope) {
44             $scope.bill.discount = newValue > 100 ? 10 : 0;
45         }
46 
47         $scope.$watch($scope.totalCart, calculateDiscount);
48     }]);
49 </script>
50 </body>
51 </html>