AngularJS之watch

danan

简介

    首先apply方法会触发evel方法，当evel方法解析成功后，会去触发digest方法，digest方法会触发watch方法。

    在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。

    AngularJS内部的watch实现了页面随model的及时更新。

    $watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。】

语法

    $watch(watchFn,watchAction,deepWatch)

        watchFn:该参数是一个带有Angular 表达式或者函数的字符串，它会返回被监控的数据模型的当前值。这个表达式将会被执行很多次，所以你要保证它不会产生其他副作用。也就是说，要保证它可以被调用很多次而不会改变状态。基于同样的原因，监控表达式应该很容易被计算出来。如果你使用字符串传递了一个Angular 表达式，那么它将会针对调用它的那个作用域中的对象而执行。

　　   watchAction(newValue,oldValue,scope):这是一个函数或者表达式，当watchFn 发生变化时会被调用。如果是函数的形式，它将会接收到watchFn 的新旧两个值，以及作用域对象的引用。其函数签名为function(newValue, oldValue, scope)。

        deepWatch：如果设置为true，这个可选的布尔型参数将会命令Angular 去检查被监控对象的每个属性是否发生了变化。如果你想要监控数组中的元素，或者对象上的所有属性，而不只是监控一个简单的值，你就可以使用这个参数。由于Angular 需要遍历数组或者对象，如果集合比较大，那么运算负担就会比较重。

    $watch会返回一个函数，想要注销这个watch可以使用函数.

1. var dereg = $scope.$watch('someModel.someProperty', callbackOnChange());
   
2. dereg();

复制代码

用法

1. <h3>watch简单数据类型</h3>
   
2. <div ng-controller="ng-watch">
   
3.     <input type="text" ng-model="num"><br/>
   
4.     <span ng-bind="'变化前的值-'+preVal"></span><br/>
   
5.     <span ng-bind="'变化后的值-'+val"></span><br/>
   
6.     <label ng-bind="'变化次数-'+count"></label>
   
7. </div>
   
8. m1.controller("ng-watch",["$scope",function($sc){
   
9.     $sc.num = 0;
   
10.     $sc.count = 0;
    
11.     $sc.preVal = "";
    
12.     $sc.val = "";
    
13.     $sc.$watch("num",function(newValue,oldValue){
    
14.         if(newValue!==oldValue){
    
15.             $sc.preVal = oldValue;
    
16.             $sc.val = newValue;
    
17.             $sc.count++;
    
18.         }
    
19.    });
    
20. }]);
    
21. 1
    
22. 2
    
23. 3
    
24. 4
    
25. 5
    
26. 6
    
27. 7
    
28. 8
    
29. 9
    
30. 10
    
31. 11
    
32. 12
    
33. 13
    
34. 14
    
35. 15
    
36. 16
    
37. 17
    
38. 18
    
39. 19
    
40. 20
    
41. <h3>watch对象</h3>
    
42. <div ng-controller="ng-watch2">
    
43.     <input type="text" ng-model="o.num"><br/>
    
44.     <span>{{'变化前的值-'+preObj}}</span><br/>
    
45.     <span>{{'变化后的值-'+obj}}</span><br/>
    
46.     <label ng-bind="'变化次数-'+count"></label>
    
47. </div>
    
48. m1.controller("ng-watch2",["$scope",function($sc){
    
49.     $sc.o = {"num": 0};
    
50.     $sc.count = 0;
    
51.     $sc.preObj = "";
    
52.     $sc.obj = "";
    
53.     $sc.$watch('o',function(newValue,oldValue){
    
54.         if(newValue!==oldValue){
    
55.             $sc.preObj = oldValue;
    
56.             $sc.obj = newValue;
    
57.             $sc.count++;
    
58.         }
    
59.    },true);
    
60. }]);

复制代码