快捷導(dǎo)航

AngularJS中的$watch()，$digest()和$apply()區(qū)分

更新時間：2016年04月04日 09:02:11 作者：liangzi4000

這篇文章主要介紹了AngularJS中的$watch()，$digest()和$apply()區(qū)分，感興趣的朋友可以參考一下

AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函數(shù)，學(xué)習(xí)AngularJS必須理解這幾個函數(shù)。

在綁定$scope中的變量到view的時候，AngularJS自動在內(nèi)部創(chuàng)建一個"Watch"。"Watch"用于監(jiān)聽AngularJS scope中變量的改變。可以通過調(diào)用$scope.$watch()這個方法來創(chuàng)建"Watch"。

$scope.$digest()函數(shù)會循環(huán)訪問所有的watches，并檢測其所監(jiān)聽的$scope中的變量是否改變。如果變量發(fā)生改變，會調(diào)用該變量對應(yīng)的監(jiān)聽函數(shù)。監(jiān)聽函數(shù)可以實現(xiàn)很多操作，比如讓html里面的text文本顯示最新的變量值。可見，$scope.$digest是可以觸發(fā)數(shù)據(jù)綁定更新的。

大部分情況下，AngualrJS會自動調(diào)用$scope.$watch()和$scope.$digest()函數(shù)，但是在某些情況下，我們需要手動調(diào)用他們，因此，有必要了解他們是怎么工作的。

$scope.$apply()這個函數(shù)會先執(zhí)行一些代碼，之后在調(diào)用$scope.$digest()。所有的watches會被檢測一次，相應(yīng)的監(jiān)聽函數(shù)也會被執(zhí)行。$scope.$apply()在AngularJS與其它javascript代碼集成時是很有用的。

接下來我們具體的講解下$watch(), $digest() 和 $apply()。

$watch()
$watch(watchExpression, listener, [objectEquality])

watchExpression：監(jiān)聽對象，可以是string或者function(scope){}

listener：監(jiān)聽對象發(fā)生改變時執(zhí)行的回調(diào)函數(shù)function(newVal,oldVal,scope){}

objectEquality：是否深度監(jiān)聽，如果設(shè)置為true，它告訴Angular檢查所監(jiān)控的對象中每一個屬性的變化。如果你希望監(jiān)控數(shù)組的個別元素或者對象的屬性而不是一個普通的值, 那么你應(yīng)該使用它。（默認(rèn)值：false）

$digest()
檢測當(dāng)前scope以及子scope中所有的watches，因為監(jiān)聽函數(shù)會在執(zhí)行過程中修改model(scope中的變量)，$digest()會一直被調(diào)用直到model沒有再變。當(dāng)調(diào)用超過10次時，$digest()會拋出一個異常"Maximum iteration limit exceeded'，以此來防止程序進(jìn)入一個死循環(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
下面我們通過一個例子來說明$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>

這段代碼會綁定$scope.data.time到HTML中顯示出來，同時這個綁定會自動創(chuàng)建一個watch來監(jiān)聽$scope.date.time的變化。此外，這里還有2個按鈕，第一個按鈕是通過ng-click Directive來調(diào)用$scope.updateTime方法，之后AngularJS會自動執(zhí)行$scope.$digest()使最新的時間顯示到HTML中。第二個按鈕是通過javascript代碼添加一個點(diǎn)擊事件，以此來更新HTML中的時間。但是第二個按鈕是不能工作的，它的解決辦法是在點(diǎn)擊事件的最后手動的去調(diào)用$scope.$digest()方法，如下：

document.getElementById("updateTimeButton")
    .addEventListener('click', function() {
  console.log("update time clicked");
  $scope.data.time = new Date();
  $scope.$digest();
});

另外一個解決辦法是調(diào)用$scope.$apply()，如下：

document.getElementById("updateTimeButton")
    .addEventListener('click', function() {
  $scope.$apply(function(){
      console.log("update time clicked");
      $scope.data.time = new Date();
    }
  );
});

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: