解釋scope.$apply用來做什麼? -- AngularJS

References: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html


1.  $apply and $digest


    $scope.$digest()其實是用來檢查binding的值有沒有被改變。但是這個方法通常是不會直接拿來用,所以會去使用$scope.$apply()來取代,因為$scope.$apply()就會去呼叫使用$scope.$digest()了。  

 $scope.$apply() 會做以下兩件事:

* 執行function或是Angular Expression。
* 呼叫$scope.$digest() 來更新任何的bindings或watchers。

    什麼時候需要去使用$scope.$apply()呢?其實也很少會用到,在AngularJS中幾乎你的code都會包在$scope.$apply()中,Events像是ng-click, controller initialization, $http callbacks 全部都是被$scope.$apply() 給包住的。所以你不需要自己去呼叫 $scope.$apply() 。而且在$scope.$apply() 中呼叫$scope.$apply() 會出現錯誤。

    所以真正會用到$scope.$apply()的情況是瀏覽器DOM events, setTimeout, XHR(XMLHttpREquest) 或是第三方套件。

範例:
setTimeout


<div ng-app ng-controller='Ctrl' >
  {{message}}
</div>Check out this Pen!

function Ctrl($scope){
  $scope.message = "This message will updated after 1000ms"
  
  setTimeout(function(){
    $scope.$apply( function() {
        $scope.message = "Update Message";
    });
  }, 2000);
}Check out this Pen!
如果你不想這樣寫,AngularJs有提供$timeout來幫你。
function Ctrl($scope,  $timeout){
    $scope.message = "Message";
  
  $timeout(function(){
      $scope.message = "Update";
  }, 1000);
    
}Check out this Pen!
張貼留言

這個網誌中的熱門文章

Unions 在C語言的簡單介紹

JavaScript的Timer用法