溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了angular中$watch方法的案例分析，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
在$apply方法中提到過臟檢查，首先apply方法會觸發(fā)evel方法，當evel方法解析成功后，會去觸發(fā)digest方法，digest方法會觸發(fā)watch方法。
(1)$watch簡介
在digest執(zhí)行時，如果watch觀察的的value與上一次執(zhí)行時不一樣時，就會被觸發(fā)。
AngularJS內(nèi)部的watch實現(xiàn)了頁面隨model的及時更新。
$watch方法在用的時候主要是手動的監(jiān)聽一個對象，但對象發(fā)生變化時觸發(fā)某個事件。
(2)watch方法用法
$watch(watchFn,watchAction,deepWatch)
watchFn:angular表達式或函數(shù)的字符串
watchAction(newValue,oldValue,scope):watchFn發(fā)生變化會被調(diào)用
deepWatch：可選的布爾值命令檢查被監(jiān)控的對象的每個屬性是否發(fā)生變化
$watch會返回一個函數(shù)，想要注銷這個watch可以使用函數(shù)
(3)例子
在前面的例子中，當name的表單改變30次，然后觸發(fā)某個事件。
控制器代碼如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var firstController = function ($scope){
$scope.n
ame='張三';
$scope.count=0;
// 監(jiān)聽一個model 當一個model每次改變時 都會觸發(fā)第2個函數(shù)
$scope.$watch('name',function(newValue,oldValue){
++$scope.count;
if($scope.count > 30){
$scope.name = '已經(jīng)大于30次了';
}
});
} |
html代碼如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p ng-app="">
<p ng-controller="firstController">
<input type="text" value="" ng-model="name"/>
改變次數(shù):{{count}}-{{name}}
</p>
</p>
<script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html> |
運行效果如下：
前30次可以隨意修改：
當修改了30次后，name固定為'已經(jīng)大于30次了'：
這就是watch的作用，model每一次改變時都會觸發(fā)第二個函數(shù)。
(4)watch的第三個參數(shù)
當監(jiān)聽的為一個對象或者數(shù)組時，例如：
1 2 3 4 | $scope.data = {
name :'李四',
count:20
} |
此時data里的name和count都要監(jiān)聽，那么可以這么寫：
1 2 3 | $scope.$watch('data',function(){
},true) |
如果不加第三個參數(shù)，那么只會監(jiān)聽data，只有當data引用改變時才會觸發(fā)。
因此當需要監(jiān)聽一些引用對象需要把第三個參數(shù)設置成true。
感謝你能夠認真閱讀完這篇文章，希望小編分享angular中$watch方法的案例分析內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
