Angularjs error $apply already in progress reasons and solutions

If we use the $scope in Angularjs. $apply () or $scope. $digest (), we are likely to encounter an error similar to the following, although this error does not have much effect, but it seems to be very uncomfortable in the log, the log is recorded in the exception or error, Should be a concern and solve the problem, otherwise there is no need to appear in the log.

The reason is: the ANGULARJS framework itself is already doing dirty data detection, we do not need to manually call $apply or $digest. There's a natural question here: When do we need to call $apply or $digest manually, and when do we need it? The following two scenarios are listed first:

If there is an asynchronous operation in the case 1:controller, such as Ajax callback, timeout delay, etc. It can be understood that, due to the existence of asynchronous (delay), when the callback function is started, the detection of the dirty value in the ANGULARJS self controller is over, and the callback function is unable to detect the change of the data.

1 //HTML2<div>{{text}}</div>3 4 //JS5 varMyModule = Angular.module (' MyModule '), []); 6Mymodule.controller ("Ctrl_1",function($scope) {7$scope. Text = "Place"; 8               9SetTimeout (function(){  Ten$scope. Text = "Value setted after Time Out";  One$scope. $apply ();//dirty value detection must be done manually, otherwise data cannot be flushed to the interface A},1000);  -            -});

Use $timeout service instead of settimeout (), do not need to call $apply () manually, $timeout service will automatically call $apply ();

Scenario 2: Modify the data in the $scope in the jquery code. This is the case when the data in the $scope is manipulated outside the angular framework, and angular cannot detect that the data changes are normal.

//JS<script>varMyModule = 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= "bu Tton "value=" jquery-event "></input> </div>

How can I tell if I need to call $apply () manually?

$$phaseIs the status flag bit used internally by the Angluar to identify whether it is currently in the digest state.

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

Angularjs error $apply already in progress reasons and solutions