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

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

$watch (watchFn, watchAction, deepWatch)

其中watchFn

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

　　watchAction

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

　　deepWatch

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

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

 <!DOCTYPE>

 <html ng-app='myApp'>

 <head>

     <meta charset="UTF-8">

     <title>Your Shopping Cart</title>

     <script src="../../../vendor/angular/angular.js"></script>

     <script src="../../../vendor/angular/angular-route.js"></script>

 </head>

 <body ng-controller='CartController'>

 <h1>Your order</h1>

 <div ng-repeat="item in items">

     <span>{{item.title}}</span>

     <input ng-model='item.quantity'>

     <span>{{item.price | currency}}</span>

     <span>{{item.price * item.quantity | currency}}</span>

     <div>Total:{{totalCart()}}</div>

     <div>Discount: {{bill.discount}}</div>

     <div>Subtatal: {{subtotal()}}</div>

 </div>

 <script>

     var myAppMoudle = angular.module('myApp', []);

     myAppMoudle.controller('CartController', ['$scope', function ($scope) {

         $scope.bill={};

         $scope.discount = 2;

         $scope.items = [{title: 'paint', quantity: 8, price: 3.95},

             {title: 'pa', quantity: 7, price: 3.95},

             {title: 'paa', quantity: 17, price: 3.95},

             {title: 'paaa', quantity: 177, price: 3.95}];

         $scope.totalCart = function () {

             var total = 0;

             for(var i = 0, len = $scope.items.length; i < len; i++){

                 total = total + $scope.items[i].price * $scope.items[i].quantity;

             }

             return total;

         }

         $scope.subtotal = function () {

             return $scope.totalCart() - $scope.discount;

         };

         function calculateDiscount(newValue, oldValue, scope) {

             $scope.bill.discount = newValue > 100 ? 10 : 0;

         }

         $scope.$watch($scope.totalCart, calculateDiscount);

     }]);

 </script>

 </body>

 </html>

巴特西

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

最新文章

热门文章