$apply()和$digest()在AngularJS中是兩個核心概念，但是有時候它們又讓人困惑。而為了了解AngularJS的工作方式，首先需要了解$apply()和$digest()是如何工作的。這篇文章旨在解釋$apply()和$digest()是什么，以及在日常的編碼中如何應用它們。
1、探索$apply()和$digest()
1.1、認識雙向數據綁定和$watch();
AngularJS提供了一個非常酷的特性叫做雙向數據綁定(Two-way Data Binding)，這個特性大大簡化了我們的代碼編寫方式。數據綁定意味著當View中有任何數據發(fā)生了變化，那么這個變化也會自動地反饋到scope的數據上，也即意味著scope模型會自動地更新。類似地，當scope模型發(fā)生變化時，view中的數據也會更新到最新的值。那么AngularJS是如何做到這一點的呢？當你寫下表達式如{{ aModel }}時，AngularJS在幕后會為你在scope模型上設置一個watcher，它用來在數據發(fā)生變化的時候更新view。這里的watcher和你會在AngularJS中設置的watcher是一樣的：
$scope.$watch(‘aModel', function(newValue, oldValue) { //update the DOM with newValue });傳入到$watch()中的第二個參數是一個回調函數，該函數在aModel的值發(fā)生變化的時候會被調用。當aModel發(fā)生變化的時候，這個回調函數會被調用來更新view這一點不難理解，但是，還存在一個很重要的問題！AngularJS是如何知道什么時候要調用這個回調函數呢？換句話說，AngularJS是如何知曉aModel發(fā)生了變化，才調用了對應的回調函數呢？它會周期性的運行一個函數來檢查scope模型中的數據是否發(fā)生了變化嗎？好吧，這就是$digest循環(huán)的用武之地了。
在$digest循環(huán)中，watchers會被觸發(fā)。當一個watcher被觸發(fā)時，AngularJS會檢測scope模型，如何它發(fā)生了變化那么關聯(lián)到該watcher的回調函數就會被調用。那么，下一個問題就是$digest循環(huán)是在什么時候以各種方式開始的？
在調用了$scope.$digest()后，$digest循環(huán)就開始了。假設你在一個ng-click指令對應的handler函數中更改了scope中的一條數據，此時AngularJS會自動地通過調用$digest()來觸發(fā)一輪$digest循環(huán)。當$digest循環(huán)開始后，它會觸發(fā)每個watcher。這些watchers會檢查scope中的當前model值是否和上一次計算得到的model值不同。如果不同，那么對應的回調函數會被執(zhí)行。調用該函數的結果，就是view中的表達式內容(譯注：諸如{{ aModel }})會被更新。除了ng-click指令，還有一些其它的built-in指令以及服務來讓你更改models(比如ng-model，$timeout等)和自動觸發(fā)一次$digest循環(huán)。
目前為止還不錯！但是，有一個小問題。在上面的例子中，AngularJS并不直接調用$digest()，而是調用$scope.$apply()，后者會調用$rootScope.$digest()。因此，一輪$digest循環(huán)在$rootScope開始，隨后會訪問到所有的children scope中的watchers。
Note: $scope.$apply()會自動地調用$rootScope.$digest()。
$apply()方法有兩種形式:
第一種會接受一個function作為參數，執(zhí)行該function并且觸發(fā)一輪$digest循環(huán)。
第二種會不接受任何參數，只是觸發(fā)一輪$digest循環(huán)。我們馬上會看到為什么第一種形式更好。
1.2、什么時候手動調用$apply()方法？
如果AngularJS總是將我們的代碼wrap到一個function中并傳入$apply()，以此來開始一輪$digest循環(huán)，那么什么時候才需要我們手動地調用$apply()方法呢？實際上，AngularJS對此有著非常明確的要求，就是它只負責對發(fā)生于AngularJS上下文環(huán)境中的變更會做出自動地響應(即，在$apply()方法中發(fā)生的對于models的更改)。AngularJS的built-in指令就是這樣做的，所以任何的model變更都會被反映到view中。但是，如果你在AngularJS上下文之外的任何地方修改了model，那么你就需要通過手動調用$apply()來通知AngularJS。這就像告訴AngularJS，你修改了一些models，希望AngularJS幫你觸發(fā)watchers來做出正確的響應。
比如，如果你使用了JavaScript中的setTimeout()來更新一個scope model，那么AngularJS就沒有辦法知道你更改了什么。這種情況下，調用$apply()就是你的責任了，通過調用它來觸發(fā)一輪$digest循環(huán)。類似地，如果你有一個指令用來設置一個DOM事件listener并且在該listener中修改了一些models，那么你也需要通過手動調用$apply()來確保變更會被正確的反映到view中。
讓我們來看一個例子。加入你有一個頁面，一旦該頁面加載完畢了，你希望在兩秒鐘之后顯示一條信息。你的實現可能是下面這個樣子的：
html:
<body ng-app=“myApp”> <div ng-controller=“MessageController”> Delayed Message: {{message}} </div> </body>JavaScript:
/* What happens without an $apply() */ angular.module(‘myApp',[]).controller(‘MessageController', function($scope) { $scope.getMessage = function() { setTimeout(function() { $scope.message = ‘Fetched after 3 seconds'; console.log(‘message:'+$scope.message); }, 2000); } $scope.getMessage(); });通過運行這個例子，你會看到過了兩秒鐘之后，控制臺確實會顯示出已經更新的model，然而，view并沒有更新。原因也許你已經知道了，就是我們忘了調用$apply()方法。因此，我們需要修改getMessage()，如下所示：
/* What happens with $apply */ angular.module(‘myApp',[]).controller(‘MessageController', function($scope) { $scope.getMessage = function() { setTimeout(function() { $scope.$apply(function() { //wrapped this within $apply $scope.message = ‘Fetched after 3 seconds'; console.log(‘message:' + $scope.message); }); }, 2000); } $scope.getMessage(); });如果你運行了上面的例子，你會看到view在兩秒鐘之后也會更新。唯一的變化是我們的代碼現在被wrapped到了$scope.$apply()中，它會自動觸發(fā)$rootScope.$digest()，從而讓watchers被觸發(fā)用以更新view。
Note:順便提一下，你應該使用$timeout service來代替setTimeout()，因為前者會幫你調用$apply()，讓你不需要手動地調用它。
而且，注意在以上的代碼中你也可以在修改了model之后手動調用沒有參數的$apply()，就像下面這樣：
$scope.getMessage = function() { setTimeout(function() { $scope.message = ‘Fetched after two seconds'; console.log(‘message:' + $scope.message); $scope.$apply(); //this triggers a $digest }, 2000); };以上的代碼使用了$apply()的第二種形式，也就是沒有參數的形式。需要記住的是你總是應該使用接受一個function作為參數的$apply()方法。這是因為當你傳入一個function到$apply()中的時候，這個function會被包裝到一個try…catch塊中，所以一旦有異常發(fā)生，該異常會被$exceptionHandler service處理。
使用 $apply()的情況如下：
•通常可以依賴于Angular提供的可用于視圖中的任意指令來調用 $apply() 。所有 ng-[event]指令（比如 ng-click 、 ng-keypress ）都會調用 $apply() 。
•此外還可以依賴于一系列Angular內置的服務來調用 $digest() 。比如 $http 服務會在XHR請求完成并觸發(fā)更新返回值（promise）之后調用 $apply() 。
•無論何時我們手動處理事件，使用第三方框架（比如jQuery、Facebook API） ，或者調用setTimeout() ，都可以使用 $apply() 函數讓Angular返回 $digest 循環(huán)。
調用setTimeout()：
<!DOCTYPE html><html ng-app="myApp"><head><title>$scope.$apply()用法</title><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div id="div1" ng-controller="mytext"> <div>{{text}}</div> <input id="btn" type="button" value="jquery-event"></input> </div> </body></html><script type="text/javascript">var myModule = angular.module('myApp', []); myModule.controller("mytext",function($scope){ $scope.text = "place"; setTimeout(function(){ $scope.text = "value setted after time out"; $scope.$apply();//必需手動進行臟值檢測,否則數據無法刷新到界面 },1000); }); </script>使用第三方框架（比如jQuery、Facebook API）：
<!DOCTYPE html><html ng-app="myApp"><head><title>$scope.$apply()用法</title><meta charset="utf-8"><script src="https://cdn.jsdelivr.net/jquery/3.1.0/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div id="div1" ng-controller="mytext"> <div>{{text}}</div> <input id="btn" type="button" value="jquery-event"></input> </div> </body></html><script type="text/javascript">var myModule = angular.module('myApp', []); myModule.controller("mytext",function($scope){ $scope.text = "place"; }); $(function(){ $("#btn").click(function(){ var $scope = $("#btn").scope(); $scope.text = "value setted in jquery"; $scope.$apply(); }); }) </script>1.3、$digest循環(huán)會運行多少次？
當一個$digest循環(huán)運行時，watchers會被執(zhí)行來檢查scope中的models是否發(fā)生了變化。如果發(fā)生了變化，那么相應的listener函數就會被執(zhí)行。這涉及到一個重要的問題。如果listener函數本身會修改一個scope model呢？AngularJS會怎么處理這種情況？
答案是$digest循環(huán)不會只運行一次。在當前的一次循環(huán)結束后，它會再執(zhí)行一次循環(huán)用來檢查是否有models發(fā)生了變化。這就是臟檢查(Dirty Checking)，它用來處理在listener函數被執(zhí)行時可能引起的model變化。因此，$digest循環(huán)會持續(xù)運行直到model不再發(fā)生變化，或者$digest循環(huán)的次數達到了10次。因此，盡可能地不要在listener函數中修改model。
Note: $digest循環(huán)最少也會運行兩次，即使在listener函數中并沒有改變任何model。正如上面討論的那樣，它會多運行一次來確保models沒有變化。
結語
需要記住的最重要的是AngularJS是否能檢測到你對于model的修改。如果它不能檢測到，那么你就需要手動地調用$apply()。
如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
