Understanding $apply () and $digest () in angular

Last Update:2015-10-12 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

A recent manual call with Angularjs $apply always encounters an error: $degist already in Progress. After a few online search found, in fact, because I use the $apply is not clear generated. So read a few blog, Enlightened. Let's talk about why you use $apply, the official document Explains: it is only responsible forAngularJS Changes in the context are automatically responded to. What do you mean, in Layman's terms, If you modify the model outside of the Angularjs context, then you have to manually pass $apply to let angular know that the view must be Refreshed. This problem is more prominent on settimeout (), when the model can play the updated value from the console, but the angular on the view is not changed, because no apply is Used. There are two ways to invoke apply, one of which is $scope. $apply (function () {}) Another type of direct $scope without Parameters. $apply (); now that $apply has been said, say $degist. We all know that a very important feature of angular is two-way binding, and when the model changes, the view changes, so when does Angularjs know how to change the view? This leads to the $degist, which is triggered in the degist, and then Ng examines the scope model, and if it changes, the callback function associated to the watcher is Called. The $degist loop does not run only once, and every time the loop ends, the model that the listener function is executed is checked for changes, which is the dirty check that is often heard, $degist the loop continues to run until the model no longer changes. So try to modify the model as little as possible in the Listener. Original Blog Content:$apply () and $digest () are two core concepts in AngularJS, but sometimes they are confusing. To understand how AngularJS works, you first need to understand how $apply () and $digest () Work. This article is intended to explain what $apply () and $digest () are, and how they are applied in everyday coding. Explore $apply () and $digest () AngularJSProvides a very cool feature called two-way data bindingviewscope 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 viewwatcher in angularjs of theWatcher is the same: <pre><pre>function (newvalue, oldValue) { //Update the DOM with NewValue});</pre></pre>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 . Let's take a look at an example. Join you have a page, once the page has been loaded, you want to display a message after two SECONDS. Your implementation might look something like this:Html:<pre><pre><ng-app= "myApp"> <Ng-controller = "messagecontroller"> Delayed message: {{Message}} </ div> </body></pre></pre>Javascript:<pre><pre> /* What happens without an $apply () Span style= "color: #008000;" >*/ angular.module ( ' myApp ', []). controller (' messagecontroller ', function ($scope) {$scope. getMessage = function () {setTimeout ( function () {$scope. message = ' fetched after 3 seconds ' $scope. message); }, 2000); } $scope. getMessage (); });</pre></pre>By running this example, you will see that after two seconds, the console does show the updated model, however, theview is not Updated. Maybe you already know that we forgot to call the $apply () method. therefore, We need to modify the getMessage ()as follows: <pre>/*what happens with $apply*/Angular.module (' MYAPP ', []). controller (' Messagecontroller ',function($scope) {$scope. getMessage=function() {setTimeout (function() {$scope. $apply (function() { //wrapped this within $apply$scope. message = ' fetched after 3 seconds '; Console.log (' Message: ' +$scope. message); }); }, 2000); } $scope. getMessage (); });</pre>If you run the example above, you will see that the view is updated after two seconds. The only change is that our code is now wrapped to $scope. $apply () , it automatically triggers $rootScope. $digest (), allowing watchers is triggered to update the view. Note: by The way, you should use the $timeout service instead of SetTimeout (), because the former will help you call $apply (), So you don't need to call it manually. also, Note that in the above code you can manually invoke the $apply () without parameters after modifying the model , as Follows: <pre><pre>function () { setTimeout() {= ' fetched after-seconds '; Console.log (' message: ' + $scope. message); // this triggers a $digest }, a);};</pre></pre>The code above uses the second form of the $apply () , which is the form without Parameters. Remember that you should always use a $apply () method that accepts a function as a parameter . This is because when you pass a function into the $apply ( ), The function is wrapped in a try... catch block, so that if an exception occurs, the exception is handled $exceptionHandler service . How many times will the $digest loop run? When a $digest loop runs,watchers is executed to check if the models in the scope has Changed. If there is a change, the corresponding listener function will be executed. This relates to an important issue. What if the listener function itself modifies a scope model ? What will AngularJS do with the situation? The answer is that the $digest Loop does not run only Once. At the end of the current cycle, it will perform a loop again to check if any models have changed . This is the dirty check (Dirty Checking), which is used to handle the model changes that can be caused when the listener function is executed . As a result, the$digest cycle runs until the model no longer changes, or the number of $digest loops reaches ten Times. therefore, try not to modify the model in the listener function as much as possible . Note: the $digest Loop will run at least two times, even if the listener function does not change any model. As discussed above, it will run more than once to ensure that the models is Unchanged. ConclusionI hope this article explains the $apply and $digest clearly . The most important thing to remember is whether AngularJS can detect your modifications to the Model. If it cannot be detected, then you need to call $apply () manually. Original Address:http://www.sitepoint.com/understanding-angulars-apply-digest/Understanding $apply () and $digest () in angular

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Understanding $apply () and $digest () in angular

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

Understanding $apply () and $digest () in angular

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support