AngularJS digest loop and $ apply

AngularJS digest loop and $ apply

Recently, I was writing AngularJS and encountered a problem. I used Ajax to asynchronously request background data and assigned the result to the attributes of an object in the current scope. How can I not retrieve them on the page, however, it can be printed normally on the js end.

Cause analysis: The first reason is that the front-end page binding command is incorrect and cannot be properly displayed. However, the commands cannot be normally obtained due to changes. In the end, Ajax is removed and directly returned to the page, the result is correct. It is excluded from binding commands. Then the problem occurs on the scope ??? After reading the information, I finally learned that using a third-party framework (such as jQuery) or calling setTimeout () will cause it to run outside the AngularJS context. The apply () function returns Angular The digest loop is passed to the Angular application.

1. Trigger traditional events

In the standard browser flow, page loading, $ http request return response, mouse movement, and Button clicking all trigger events. When an event is triggered (such as clicking a link), JavaScript creates an event object and executes all functions of the event object to listen to specific events. Then the Browser executes the callback function registered to the event to update the DOM.

Note: you cannot run two events at the same time.

When angular is used, it expands the standard browser process and creates an angular context (the specific code in the angular event loop, which is usually called the $ digest loop ).

Ii. $ digest Loop

The digest loop consists of two main parts: Watch List, $ evalAsync list.

1. $ watch List

Angular tracks changes Add a monitoring function to the watch List. Note that all functions are bound to the same The UI element of the scope object. Only one Watch Watch List. These The watch list will be The program parsing of the "dirty Value Check" in the digest loop (check whether the value has changed, but the entire application has not synchronized this change.
(1) $ watch (watchExpression, listener/callback, objectEquality)

(2) $ watchCollection (obj/string, listener)

$ Scope. $ watchCollection ('names', function (newNames, oldNames, scope) {// handle change sending });

2. $ evalAsync list

$ EvalAsync () is a way to schedule expressions in the current scope to run at a certain time in the future.

When $ evalAsync () is called by the command and controller, it will run after angular operates DOM and before rendering by the browser. Therefore, never use it to specify the sequence of events.

3. $ digest loop in the page

(1) angular sets an implicit monitor to bind the value of the input field to the current $ scope object;

(2) When a user inputs a character, the angular context takes effect and starts traversing $ watchers ($ watch list );

(3) the monitoring function is executed on $ scope. user. name binding;

(4) Before exiting the $ digest loop, verification and formatting operations on the value (ng-model) will be triggered;

(5) angular needs to run this loop again to determine that it has not changed other values on the scope object because the value of the digest loop has changed. (Cause: if there is The attributes of scope. user. fullName are Scope. user. firstName and $ scope. user. lastName are composed of two values. Changes in these two values will lead to changes in fullName, so you need to confirm them again );

(6) $ digest exits cyclically, And the browser redraws the DOM to refresh the view.

4. $ apply

All the commands ng-[event] (such as ng-click) Call Scope. Apply () to force the $ digest loop to run.

The apply () function allows expressions to be executed within the angular context from outside the angular framework. When processing events manually, you can use the third framework (such as jquery) or call setTimeout. The apply () function transfers the value to the angular application.

(1) It is not recommended to use $ apply () in the controller, because this will make it difficult to test.
(2) simultaneous use of jquery and angular is considered a dirty behavior.