這篇文章主要介紹了AngularJS中的$watch()，$digest()和$apply()區(qū)分，感興趣的朋友可以參考一下
AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函數(shù)，學(xué)習(xí)AngularJS必須理解這幾個(gè)函數(shù)。
在綁定$scope中的變量到view的時(shí)候，AngularJS自動(dòng)在內(nèi)部創(chuàng)建一個(gè)"Watch"。"Watch"用于監(jiān)聽(tīng)AngularJS scope中變量的改變?？梢酝ㄟ^(guò)調(diào)用$scope.$watch()這個(gè)方法來(lái)創(chuàng)建"Watch"。
$scope.$digest()函數(shù)會(huì)循環(huán)訪問(wèn)所有的watches，并檢測(cè)其所監(jiān)聽(tīng)的$scope中的變量是否改變。如果變量發(fā)生改變，會(huì)調(diào)用該變量對(duì)應(yīng)的監(jiān)聽(tīng)函數(shù)。監(jiān)聽(tīng)函數(shù)可以實(shí)現(xiàn)很多操作，比如讓html里面的text文本顯示最新的變量值。可見(jiàn)，$scope.$digest是可以觸發(fā)數(shù)據(jù)綁定更新的。
大部分情況下，AngualrJS會(huì)自動(dòng)調(diào)用$scope.$watch()和$scope.$digest()函數(shù)，但是在某些情況下，我們需要手動(dòng)調(diào)用他們，因此，有必要了解他們是怎么工作的。
$scope.$apply()這個(gè)函數(shù)會(huì)先執(zhí)行一些代碼，之后在調(diào)用$scope.$digest()。所有的watches會(huì)被檢測(cè)一次，相應(yīng)的監(jiān)聽(tīng)函數(shù)也會(huì)被執(zhí)行。$scope.$apply()在AngularJS與其它javascript代碼集成時(shí)是很有用的。
接下來(lái)我們具體的講解下$watch(), $digest() 和 $apply()。
$watch()
$watch(watchExpression, listener, [objectEquality])
watchExpression：監(jiān)聽(tīng)對(duì)象，可以是string或者function(scope){}
listener：監(jiān)聽(tīng)對(duì)象發(fā)生改變時(shí)執(zhí)行的回調(diào)函數(shù)function(newVal,oldVal,scope){}
objectEquality：是否深度監(jiān)聽(tīng)，如果設(shè)置為true，它告訴Angular檢查所監(jiān)控的對(duì)象中每一個(gè)屬性的變化。如果你希望監(jiān)控?cái)?shù)組的個(gè)別元素或者對(duì)象的屬性而不是一個(gè)普通的值, 那么你應(yīng)該使用它。（默認(rèn)值：false）
$digest()
檢測(cè)當(dāng)前scope以及子scope中所有的watches，因?yàn)楸O(jiān)聽(tīng)函數(shù)會(huì)在執(zhí)行過(guò)程中修改model(scope中的變量)，$digest()會(huì)一直被調(diào)用直到model沒(méi)有再變。當(dāng)調(diào)用超過(guò)10次時(shí)，$digest()會(huì)拋出一個(gè)異常"Maximum iteration limit exceeded'，以此來(lái)防止程序進(jìn)入一個(gè)死循環(huán)。
$apply()
$apply([exp])
exp：string或者function(scope){}
$apply()生命周期偽代碼示意圖如下
function $apply(expr) {
try {
return $eval(expr);
} catch (e) {
$exceptionHandler(e);
} finally {
$root.$digest();
}
}
Example
下面我們通過(guò)一個(gè)例子來(lái)說(shuō)明$watch,$digest和$apply。
<script>
var module = angular.module("myapp", []);
var myController1 = module.controller("myController", function($scope) {
$scope.data = { time : new Date() };
$scope.updateTime = function() {
$scope.data.time = new Date();
}
document.getElementById("updateTimeButton")
.addEventListener('click', function() {
console.log("update time clicked");
$scope.data.time = new Date();
});
});
</script>
<body ng-app="myapp">
<div ng-controller="myController">
{{data.time}}
<br/>
<button ng-click="updateTime()">update time - ng-click</button>
<button id="updateTimeButton" >update time</button>
</div>
</body>
這段代碼會(huì)綁定$scope.data.time到HTML中顯示出來(lái)，同時(shí)這個(gè)綁定會(huì)自動(dòng)創(chuàng)建一個(gè)watch來(lái)監(jiān)聽(tīng)$scope.date.time的變化。此外，這里還有2個(gè)按鈕，第一個(gè)按鈕是通過(guò)ng-click Directive來(lái)調(diào)用$scope.updateTime方法，之后AngularJS會(huì)自動(dòng)執(zhí)行$scope.$digest()使最新的時(shí)間顯示到HTML中。第二個(gè)按鈕是通過(guò)javascript代碼添加一個(gè)點(diǎn)擊事件，以此來(lái)更新HTML中的時(shí)間。但是第二個(gè)按鈕是不能工作的，它的解決辦法是在點(diǎn)擊事件的最后手動(dòng)的去調(diào)用$scope.$digest()方法，如下：
document.getElementById("updateTimeButton")
.addEventListener('click', function() {
console.log("update time clicked");
$scope.data.time = new Date();
$scope.$digest();
});
另外一個(gè)解決辦法是調(diào)用$scope.$apply()，如下：
document.getElementById("updateTimeButton")
.addEventListener('click', function() {
$scope.$apply(function(){
console.log("update time clicked");
$scope.data.time = new Date();
}
);
});
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試