在$apply方法中提到過臟檢查,首先apply方法會觸發(fā)evel方法,當evel方法解析成功后,會去觸發(fā)digest方法,digest方法會觸發(fā)watch方法。
“專業(yè)、務實、高效、創(chuàng)新、把客戶的事當成自己的事”是我們每一個人一直以來堅持追求的企業(yè)文化。 成都創(chuàng)新互聯公司是您可以信賴的網站建設服務商、專業(yè)的互聯網服務提供商! 專注于成都做網站、成都網站制作、軟件開發(fā)、設計服務業(yè)務。我們始終堅持以客戶需求為導向,結合用戶體驗與視覺傳達,提供有針對性的項目解決方案,提供專業(yè)性的建議,創(chuàng)新互聯建站將不斷地超越自我,追逐市場,引領市場!
(1)$watch簡介
在digest執(zhí)行時,如果watch觀察的的value與上一次執(zhí)行時不一樣時,就會被觸發(fā)。
AngularJS內部的watch實現了頁面隨model的及時更新。
$watch方法在用的時候主要是手動的監(jiān)聽一個對象,但對象發(fā)生變化時觸發(fā)某個事件。
(2)watch方法用法
$watch(watchFn,watchAction,deepWatch)
watchFn:angular表達式或函數的字符串
watchAction(newValue,oldValue,scope):watchFn發(fā)生變化會被調用
deepWatch:可選的布爾值命令檢查被監(jiān)控的對象的每個屬性是否發(fā)生變化
$watch會返回一個函數,想要注銷這個watch可以使用函數
(3)例子
在前面的例子中,當name的表單改變30次,然后觸發(fā)某個事件。
控制器代碼如下:
var firstController = function ($scope){ $scope.name='張三'; $scope.count=0; // 監(jiān)聽一個model 當一個model每次改變時 都會觸發(fā)第2個函數 $scope.$watch('name',function(newValue,oldValue){ ++$scope.count; if($scope.count > 30){ $scope.name = '已經大于30次了'; } }); }
html代碼如下:
改變次數:{{count}}-{{name}}
運行效果如下:
前30次可以隨意修改:
當修改了30次后,name固定為'已經大于30次了':
這就是watch的作用,model每一次改變時都會觸發(fā)第二個函數。
(4)watch的第三個參數
當監(jiān)聽的為一個對象或者數組時,例如:
$scope.data = { name :'李四', count:20 }
此時data里的name和count都要監(jiān)聽,那么可以這么寫:
$scope.$watch('data',function(){ },true)
如果不加第三個參數,那么只會監(jiān)聽data,只有當data引用改變時才會觸發(fā)。
因此當需要監(jiān)聽一些引用對象需要把第三個參數設置成true。
總結
以上所述是小編給大家介紹的Angular中的$watch方法詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯網站的支持!