1. 程式人生 > >angularJS報錯$apply already in progress的原因和解決方法

angularJS報錯$apply already in progress的原因和解決方法

$apply eap module 關註 當前 typeof else ply 沒有

如果我們使用了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);
   }
}

angularJS報錯$apply already in progress的原因和解決方法