To learn the scope of Angular, angular

To learn the scope of Angular, angular

Angular Scope

In a web application built with angular, the scope concept runs through it. Many Commands in angular views create a scope, such as ng-app and ng-controller. This scope is injected when we write the Controller constructor. $scope (Angular1.2 or earlier) is a concept in the view model. Our data model is defined in the scope.

Angular scope pitfalls

People who have used angular should go through a process, that is, they thought it was awesome to see the two-way data binding at the beginning,

Angular's scope Pit 1

He started to use it directly and bound it to another user. After binding, if you are lucky (the old bird who understands the angular Scope Principle ignores it), the two-way binding will start to work as expected. At this time, we also feel very good about ourselves, we can achieve "two-way binding" so quickly before hearing about the new features.

So why does the two-way binding work properly with good luck? When a newbie started learning angular, he simply went to the tutorial and then changed the code to meet his/her business needs. Even a few contestants who could learn the official documentation at the beginning, in this way, most of the friends who just learned angular do not actually understand the principles, but they feel that they are ready to use them.

So much, let's see if a newbie is not so lucky to specify a data model for the scope and bind the data model in two-way. In this case, you will encounter the above mentioned pitfalls. Let's take a look at the code first.

// Html <div ng-controller = "OuterCtrl"> <span ng-bind = "a"> </span> <div ng-controller = "InnerCtrl"> <span ng -bind = "a"> </span> <button ng-click = "a = a + 1"> increment </button> </div> // javascriptfunction OuterCtrl ($ scope) {$ scope. a = 1 ;}function InnerCtrl (){}

The above code is an extremely simple two-way binding example. After the page is loaded, 1 is displayed in both the external div and the internal div. After you press the increment button, you will find that only the internal 1 is changed to 2, and the same is true for the continued increment button. Only the internal numbers will increase progressively. At this time, new users often get panic. What about the magical two-way binding?

Angular scope 2

At this time, the baby is a little emotional,stackoverflowStarting from the official document, we finally found a solution, for example, writing a as an object property.data.a :

// Html <div ng-controller = "OuterCtrl"> <span ng-bind = "data. a "> </span> <div ng-controller =" InnerCtrl "> <span ng-bind =" data. a "> </span> <button ng-click =" data. a = data. a + 1 "> increment </button> </div> // javascriptfunction OuterCtrl ($ scope) {$ scope. data = {a: 1 };} function InnerCtrl (){}

Then I found that I was able to work, and the two numbers increased progressively. I am the king of two-way binding ...... Then, let's continue to learn the next part of the tutorial regardless of the specific principle. This is actually the mental journey I learned from angular. I am ashamed to study the internal principles After deploying an application to the production environment.

Pitfall is always required

After talking about so much nonsense, I stepped on the pitfall. The following is the filling stage, that is, why is this pitfall solved by the attribute of the written object. It is easy to understand the principle. Angular's internal and external layer scopes are inherited based on the javascript prototype chain, and only the prototype chain inheritance method is used. Friends who have some JavaScript basics should be able to instantly respond, the reference type value in the subclass prototype object is the same as the reference type value in the parent class instance object, and the basic type value overwrites the basic type value in the parent class object, this is actually the reason for the existence of the combination inheritance, because the inheritance of the prototype chain will bring about appeal issues, a little far away

In short, we can look at the first example as follows:

function OuterCtrl() {  this.a = 1;}function InnerCtrl() {}var outer = new OuterCtrl();InnerCtrl.prototype = outer;var inner = new InnerCtrl();inner.a = inner.a + 1;

Here, we set the prototype object of the Internal Controller constructor to an external scope object, so that the generated internal scope object inherits the attribute a in the external object outer. This attribute is a basic type value. When accessing attribute a of an internal object, because the internal object itself does not have this attribute, it will be searched from its prototype object, this attribute exists in the prototype object outer, so the returned value is correct. However, if we assign a value to the attribute of the internal scope object, the problem arises. inner.a = inner.a + 1; This statement is actually used to find the attribute value of a, and then assigns the returned value to the attribute a of the internal scope object. Because the attribute a does not exist, therefore, a basic type value attribute of a is created, which shields the attribute in the outer of the outer scope object.

Therefore, if we replace the basic type value attribute with the reference type value attribute, the problem can be solved because the attributes of the two objects are the same reference type value referenced, any modification to it will be reflected on all objects that reference it.

Summary

The above is all about the pitfalls that need to be paid attention to in Angular scope. I hope this article will be helpful for you to learn about the scope in Angular.