angularJS報錯$apply already in progress的緣由和解決方法

若是咱們使用了AngularJS中的$scope.$apply()或者$scope.$digest()，咱們極可能會遇到相似下面的錯誤，雖然這個錯誤沒有太大影響，可是在日誌中看起來仍是很不爽的，日誌中記錄的異常或者錯誤，就應該是須要關注和解決的問題，不然就沒有必要出如今日誌中了。

緣由是：angularjs框架自己已經在作髒數據檢測了，咱們沒有必要再手動調用$apply或者$digest。

這裏天然而然出現了一個疑問：何時須要咱們手動調用$apply或者$digest，何時不須要呢？先列出如下兩種狀況：

狀況1：controller中若是有異步操做，好比ajax回調，timeout延時等。能夠這麼理解：因爲異步(延遲)的存在，當開始執行回調函數的時候，angularJS自身controller中的髒值檢測已經結束，沒法檢測到回調函數致使數據的變化。

 1 //html
 2 <div>{{text}}</div>
 3 
 4 //js
 5 var myModule = angular.module('myModule', []);    
 6 myModule.controller("ctrl_1",function($scope){  
 7      $scope.text = "place";  
 8               
 9       setTimeout(function(){  
10            $scope.text = "value setted after time out";  
11            $scope.$apply();//必需手動進行髒值檢測,不然數據沒法刷新到界面  
12        },1000);  
13           
14 });  

用$timeout service來代替setTimeout()，不須要手動調用$apply(), $timeout service會自動調用$apply();

狀況2：在jQuery代碼中修改$scope中的數據。這種狀況是在angular框架以外操做$scope中的數據，angular不能檢測到數據變化是正常的。

//js
<script>  
          
var myModule = angular.module('myModule', []);    
myModule.controller("ctrl_1",function($scope){  
            $scope.text = "place";  
});   
          
$(function(){  
     angular.bootstrap($("#div1")[0], ["myModule"]);   
  
      $("#btn").click(function(){  
             var $scope = $("#btn").scope();  
             $scope.text = "value setted in jquery";  
             $scope.$apply();  
       });           
})  
</script> 

//html
<div id="div1" ng-controller="ctrl_1">  
        <div>{{text}}</div>  
        <input id="btn" type="button" value="jquery-event"></input>       
    </div>   

如何判斷是否須要手動調用$apply()呢？

$$phase 是 angluar 內部使用的狀態標誌位，用於標識當前是否處於 digest 狀態。

$scope.safeApply = function(fn){ var phase = this.$root.$$phase; if (phase == '$apply' || phase == '$digest') { if (fn && ( typeof (fn) === 'function')) { fn(); } } else { this.$apply(fn); } }