Angular project $ scope. $ Apply () method

Introduction

I believe we started a project with angular, you must come across $ scope. $ Apply () method, on the surface this is like a method to help you update data, then, why it exists, how should we use it. The following further ado, take a look detailed introduction.

JavaScript execution order

JavaScript single-threaded operation, the order of the code snippet to trip, from each code block to the end of the operation will not be interrupted this is why the situation browser obstruction occurs, there is often part of the operation, which led to all the other code segments freeze.

whenever there is more time-consuming tasks occur, for example, a click event waiting, waiting for a response Ajax request, we will set a callback function when the click event is triggered or timer is completed, it will create a new JavaScript turn, and after executing the callback function.

For example:

  var button = document.getElementById ( 'clickMe'); function buttonClicked () {alert ( 'the button was clicked ');} button.addEventListener (' click ', buttonClicked); function timerComplete () {alert (' timer complete ');} setTimeout (timerComplete, 2000);  

when JavaScript code is running, first find a botton, and add a click event listener, and set atimeout. The web browser will be updated after the completion of the implementation of this code, and accept user input.

If the browser detects that a new click event occurs, he will begin a turn, to perform buttonClicked function. When the function ends execution, this phase also come to an end.

After 2000 ms, the browser will create a procedure to perform timerComplete. In between these two processes, the page is redrawn, input is received.

How to bind data to update the

Angular provides interfaces to bind us with JavaScript code and data, Angular using any data can be used to bind, and in the last one and run JavaScript, and check the data update.

to check the data change is actually $ digest function, but usually we do not directly use the $ digest function, but the use of $ apply, $ apply function receives expression or function call as a parameter to $ digest after update monitor.

that we are actually going to call $ apply what time does, in fact, Angular add almost all the code provided a $ apply, such as the ng-click, the initial controller, $ http callbacks, in this you do not need to personally call $ apply, and repeated calls cause errors.

Therefore, in case you run a new stage, and this part does not belong to the library need to use Angular $ apply. This piece of code on setTimeout, and after a delay of 2000 milliseconds, the code execution enter a new phase, but does not know Angular data is updated, so the update will not be displayed.

  function Ctrl ($ scope) {$ scope.message = "update these 2 seconds"; setTimeout (function() {$ scope.Message = "time"; // angularjs unaaware of update to $ scope}, 2000);}  
In order to facilitate everyone’s use, angular $ TIMEOUT is provided instead of Settimeout, which is equivalent to calling $ Apply default.

If you use Ajax calls other than $ http in your code, in addition to the NG- * listener, or in addition to the timer outside $ TIMEOUT,

$ Scope. USAPLY to synchronize the binding.

The above is the full content of this article, I hope this paper will bring a certain help to everyone’s learning or work, if you have any questions You can leave a message to communicate, thank you for your support of Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment