$scope.$apply is easy to understand at a glance

You can understand it at a glance

s

c

o

p

e

.

scope.

scope.apply

For me, a complete novice in the front-end, I still know little about Javascript. If I want to get started with angular JS directly, I encounter a lot of resistance. However, I believe that as long as we work hard, even anti-human designs will not be a big problem.
Okay, no more nonsense. In order to understand what angular JS is, I started with Scope. So what is Scope?
By analogy to other programming languages, it feels like Scope is like the scope of the Data Model, providing context for the execution of Expressions. Let’s understand it this way for now.

Scope features

Next, let’s see what features Scope has?
Scope provides the $watch method to monitor Model changes.
Scope provides the $apply method to propagate Model changes.
Scope can be inherited to isolate different application components and property access permissions.
Scope provides context for the evaluation of Expressions.
Regarding these four features, because I have studied ActionScript, C++, and Java before, the first, third, and fourth points are not difficult to understand, but the second point feels a bit unclear. In line with the principle of asking for answers, I still found some things through Google. For experienced veterans, please tap on the bricks!

Origin from Javascript

First, at first glance, scope.apply() seems to be a generic method that causes bindings to be updated. But think a little more, why do we need it? When is it usually used? To understand these two issues, we have to start with Javascript. In Javascript code, it is executed in a certain order. When it is the turn of a code fragment to be executed, the browser will only execute the current fragment and will not do anything else. So sometimes some web pages that are not very well made will get stuck after clicking something. The way Javascript works is one of the reasons for this phenomenon! Below we have a piece of code to feel it:

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

When loading Javascript code, first find a button with an id called “clickMe”, then add a listener, and then set a timeout. Wait 5 seconds and a dialog box will pop up. If you refresh the page and click the clickMe button immediately, a dialog box will pop up. If you don’t click OK, the timerComplete function will never have a chance to execute.

How to update bindings

Okay, after talking about some seemingly irrelevant things, let’s get back to the topic. How does angular JS know when data changes and the page needs to be updated? The code needs to know when the data has been modified, but there is currently no way to directly notify that the data on an object has changed (although ECMAScript 5 is trying to solve this problem, it is still in the experimental stage). The currently more mainstream strategies include the following two solutions. One is to use a special object so that all data can only be set by calling the object’s method instead of directly specifying it through the property. In this way, all modifications can be recorded, and you will know when the page needs to be updated. The disadvantage of this is that we must inherit a special object. Assignment can only be done through object.set(key’, value’) instead of object.key=value. In frameworks, like EmberJS and KnockoutJS do this (although I have never been exposed to it–囧). The other is the method adopted by angular JS, which checks whether there are any data changes after each Javascript code execution sequence is executed. This seems inefficient and may even seriously impact performance. However, angular JS uses some clever methods to solve this problem (it has not been studied yet, and it is not clear yet). The advantage of this is that we can use any object at will, there are no restrictions on the assignment method, and we can also detect changes in the data.
For this solution adopted by angular JS, what we care about is when the data changes, and this is where scope.apply() comes in handy. Checking whether the bound data has changed is actually done by scope.digest(), but we almost never call this method directly, but call the scope.apply() method because in scope In the .apply() method, it will call the scope.digest() method. The scope.apply() method takes a function or expression, executes it, and finally calls the scope.digest() method to update bindings or watchers.

When to use $apply()

Still the same question, when do we need to call the apply() method? The situation is very rare. In fact, almost all our code is wrapped in scope.apply(), such as ng?click, controller initialization, http callback function, etc. In these cases, we don’t need to call it ourselves. In fact, we can’t call it ourselves, otherwise calling the apply() method inside the apply() method will throw an error. We really need to use it if we need to run the code in a new execution sequence, and if and only if this new execution sequence is not created by the angular JS library method, at this time we need to use scope for the code. apply() wrapped. Let’s explain with an example:

<div ng:app ng-controller="Ctrl">{<!-- -->{message}}</div>

functionCtrl($scope) {
  $scope.message ="Waiting 2000ms for update";
  setTimeout(function () {
  ?$scope.message ="Timeout called!";
     // AngularJS unaware of update to $scope
  }, 2000);
}

After the above code is executed, the page will display: Waiting 2000ms for update. Apparently the data update is not noticed by angular JS.
Next, we slightly modify the Javascript code and wrap it with scope.apply().

functionCtrl($scope) {
  $scope.message ="Waiting 2000ms for update";
  setTimeout(function () {
  ?$scope.$apply(function () {
     ?$scope.message ="Timeout called!";
      });
  }, 2000);
}

The difference this time is that the page will first display: Waiting 2000ms for update. After waiting for 2 seconds, the content will be changed to: Timeout called!. Obviously the data update is noticed by angular JS.
NOTE: We should not do this, but use the timeout method provided by angular JS, so that it will be automatically wrapped with the apply method.

Science is a double-edged sword

Finally, let’s take another look at the scope.apply() and scope.apply(function) methods! Although angular JS has done a lot for us, we have also lost some opportunities. This can be seen at a glance from the pseudocode below:

function$apply(expr) {
try {
Return$eval(expr);
} catch(e) {
$exceptionHandler(e);
} finally {
$root.$digest();
}
}

It will catch all exceptions and will not throw them again. Finally, the $digest() method will be called.
in conclusion
The $apply() method can execute angular JS expressions outside the angular framework, such as DOM events, setTimeout, XHR or other third-party libraries. This is just the beginning, the water is still very deep, everyone is welcome to deep dive together!

————————————————– ———————————-

Introduction to offer assault training camp:

1: For those who don’t know how to interview and are not confident in the interview, we will give you an offer guarantee.

2: We will supervise you to master at least 70% of the technical points of the interview system within 15-20 days, which is enough for you to find a satisfactory job.

3: We are interview-oriented study guides. We will not take you to write code. We will teach you in detail the iterative process of the actual development of the project and the technical details of how to implement business functions. It is enough that you can express yourself fluently and clearly in the interview. Project experience You don’t have to worry (the real project experience provided by the technical teacher will definitely be useful), the efficiency is completely different between learning by yourself and learning with someone else’s system.

Please click here for details: Offer Assault Training Camp will give you a guarantee of an offer. If you are looking for a job or want to change jobs, check it out!

You can understand it at a glance s c o p e . scope. scope.apply