Angularjs $scope. $apply method

Myapp.controller (' Firstcontroller ', function ($scope, $interval) {   $scope. Date = new Date ();   SetInterval (function () {        $scope. $apply (function () {          scope.date = new Date ();         })    },1000)})

Scope provides the $watch method to monitor the model changes.
Scope provides the $apply method for propagating model changes.

AngularJSProvides a very cool feature called two-way data binding(Two-way Data Binding), this feature greatly simplifies the way our code is written. Data binding means that when theviewscope scopescope model changes, view The data in is also updated to the most recent value. So angularjs{{AModel}}angularjs Behind the scenes you set up a zh-cn watcherscope It is used to update viewwatcherangularjswatcher is the same:

$scope. $watch (' AModel ', function (NewValue, oldValue) {    //update the DOM with NewValue  });  

The second parameter passed into the $watch () is a callback function that is called when the value of AModel changes. This callback function is not difficult to understand when the AModel is changed, but there is a very important problem! How does AngularJS know when to invoke this callback function? In other words, how does AngularJS know that the AModel has changed before invoking the corresponding callback function? Does it periodically run a function to check if the data in the scope model has changed? Well, that's where the $digest Loop comes in.

In the $digest Loop, thewatchers is triggered. When a watcher is triggered,AngularJS detects the scope model and how it changes so that the callback function associated to the watcher is called. So the next question is, when does the $digest cycle start in various ways?

After calling the$scope. $digest ()After$digestThe cycle begins. Suppose you're in aNg-clickdirective corresponds to theHandlerfunction changes theScopeOne of the data in thisAngularJSis automatically passed through the call to the$digest ()To trigger a round$digestCycle. When$digestOnce the loop is started, it triggers eachwatcherwatchersscopemodelmodelview ({{AModel}) ng-click directives, there are other built-in Instructions and services to let you change models (ng-model, $timeout et ) $ Digest loop.

So far it's good! However, there is a small problem. In the example above,AngularJS does not call $digest () directly, but instead calls the $scope. $apply (), which calls the $rootScope. $digest (). Therefore, a round of $digest cycle starts in the $rootScope and then accesses all the watchers in the children scope .

Now, suppose you associate the Ng-click directive to a button and pass in a function name to Ng-click . When the button is clicked,AngularJS wraps the function into a wrapping function and then passes in to the Scope. $apply (). As a result, your function will be executed normally, modify the models ( if necessary ), and a round $digest Loop will be triggered to ensure that the view will also be updated.

Note: $scope. $apply () automatically calls $rootScope. $digest (). There are two forms of the $apply () method. The first one takes a function as a parameter, executes the function and triggers a round $digest Loop. The second one will not accept any arguments, just trigger a round of $digest loops. We'll see now why the first form is better.

When do I manually invoke the $apply () method?

IfAngularJSAlways put our codeWrapto afunctionIn and incoming$apply ()To start a round$digestLoop, then when do we need to manually call$apply ()Method? As a matter of factAngularJSThere is a very clear requirement that it is only responsible for theAngularJSChanges in the context are automatically responded to(That is, in $apply () changes to modelsangularjs built-in directive is doing so, so any of the The change of span lang= "en-US" >modelviewmodelangularjsangularjs $apply () angularjsmodelsangularjswatchers

For example, if you use setTimeout () in JavaScript to update a scope model, there is no way for AngularJS to know what you have changed. In this case, calling $apply () is your responsibility, by invoking it to trigger a round of $digest loops. Similarly, if you have an instruction to set up a DOM event listener and modify some models in the listener , you also need to manually call $apply () to ensure that changes are correctly reflected in the view .

Refer to: http://blog.csdn.net/dm_vincent/article/details/38705099

　　

Angularjs $scope. $apply method