AngularJS之watch

danan

簡(jiǎn)介

    首先apply方法會(huì)觸發(fā)evel方法，當(dāng)evel方法解析成功后，會(huì)去觸發(fā)digest方法，digest方法會(huì)觸發(fā)watch方法。

    在digest執(zhí)行時(shí)，如果watch觀察的的value與上一次執(zhí)行時(shí)不一樣時(shí)，就會(huì)被觸發(fā)。

    AngularJS內(nèi)部的watch實(shí)現(xiàn)了頁(yè)面隨model的及時(shí)更新。

    $watch方法在用的時(shí)候主要是手動(dòng)的監(jiān)聽(tīng)一個(gè)對(duì)象，但對(duì)象發(fā)生變化時(shí)觸發(fā)某個(gè)事件。】

語(yǔ)法

    $watch(watchFn,watchAction,deepWatch)

        watchFn:該參數(shù)是一個(gè)帶有Angular 表達(dá)式或者函數(shù)的字符串，它會(huì)返回被監(jiān)控的數(shù)據(jù)模型的當(dāng)前值。這個(gè)表達(dá)式將會(huì)被執(zhí)行很多次，所以你要保證它不會(huì)產(chǎn)生其他副作用。也就是說(shuō)，要保證它可以被調(diào)用很多次而不會(huì)改變狀態(tài)�；�于同樣的原因，監(jiān)控表達(dá)式應(yīng)該很容易被計(jì)算出來(lái)。如果你使用字符串傳遞了一個(gè)Angular 表達(dá)式，那么它將會(huì)針對(duì)調(diào)用它的那個(gè)作用域中的對(duì)象而執(zhí)行。

　　   watchAction(newValue,oldValue,scope):這是一個(gè)函數(shù)或者表達(dá)式，當(dāng)watchFn 發(fā)生變化時(shí)會(huì)被調(diào)用。如果是函數(shù)的形式，它將會(huì)接收到watchFn 的新舊兩個(gè)值，以及作用域?qū)ο蟮囊�用。其函�?shù)簽名為function(newValue, oldValue, scope)。

        deepWatch：如果設(shè)置為true，這個(gè)可選的布爾型參數(shù)將會(huì)命令A(yù)ngular 去檢查被監(jiān)控對(duì)象的每個(gè)屬性是否發(fā)生了變化。如果你想要監(jiān)控?cái)?shù)組中的元素，或者對(duì)象上的所有屬性，而不只是監(jiān)控一個(gè)簡(jiǎn)單的值，你就可以使用這個(gè)參數(shù)。由于Angular 需要遍歷數(shù)組或者對(duì)象，如果集合比較大，那么運(yùn)算負(fù)擔(dān)就會(huì)比較重。

    $watch會(huì)返回一個(gè)函數(shù)，想要注銷(xiāo)這個(gè)watch可以使用函數(shù).

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

復(fù)制代碼

用法

1. <h3>watch簡(jiǎn)單數(shù)據(jù)類(lèi)型</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="'變化次數(shù)-'+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對(duì)象</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="'變化次數(shù)-'+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. }]);

復(fù)制代碼