簡介

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

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

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

? ? $watch方法在用的時候主要是手動的監(jiān)聽一個對象，但對象發(fā)生變化時觸發(fā)某個事件。】

語法

? ? $watch(watchFn,watchAction,deepWatch)

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

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

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

?? ?$watch會返回一個函數(shù)，想要注銷這個watch可以使用函數(shù). 　　var dereg = $scope.$watch('someModel.someProperty', callbackOnChange());dereg();

用法　

<h3>watch簡單數(shù)據(jù)類型</h3><div ng-controller="ng-watch"><input type="text" ng-model="num"><br/><span ng-bind="'變化前的值-'+preVal"></span><br/><span ng-bind="'變化后的值-'+val"></span><br/><label ng-bind="'變化次數(shù)-'+count"></label></div>m1.controller("ng-watch",["$scope",function($sc){$sc.num = 0;$sc.count = 0;$sc.preVal = "";$sc.val = "";$sc.$watch("num",function(newValue,oldValue){if(newValue!==oldValue){$sc.preVal = oldValue;$sc.val = newValue;$sc.count++;}});}]); <h3>watch對象</h3><div ng-controller="ng-watch2"><input type="text" ng-model="o.num"><br/><span>{{'變化前的值-'+preObj}}</span><br/><span>{{'變化后的值-'+obj}}</span><br/><label ng-bind="'變化次數(shù)-'+count"></label></div>m1.controller("ng-watch2",["$scope",function($sc){$sc.o = {"num": 0};$sc.count = 0;$sc.preObj = "";$sc.obj = "";$sc.$watch('o',function(newValue,oldValue){if(newValue!==oldValue){$sc.preObj = oldValue;$sc.obj = newValue;$sc.count++;}},true);}]);

效果：http://runjs.cn/detail/vnlh0eny

轉(zhuǎn)載于:https://www.cnblogs.com/zhx1991/p/4580868.html

總結(jié)

以上是生活随笔為你收集整理的AngularJS之watch的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。