To learn the angular of the scopes needing attention in the _angularjs

Angular scopes

The concept of scope (scope) runs through the Web application built with angular. Many of the instructions in the angular view are to create a scope, such as Ng-app, Ng-controller, and so on. This scope is what we injected into the write controller constructor $scope (before angular1.2), and he is a concept in the view model. Our data model is defined in the scope.

Pits of the angular scope

People who have used angular should go through a process, just beginning or small white, just see the data two-way binding feel very good,

Angular in the scope of the pit 1

Pipe him 3,721 straight to start with, a meal bound. After binding, if you are lucky (know the angular principle of the old veteran ignore), then two-way binding began to work, then we also feel that we are very strong, incredibly can so quickly realize "two-way binding" this just heard soon new features.

So why does it say that two-way binding is good luck to work properly? Because beginners just started to learn angular, nothing more than to see the tutorial and then change the code to achieve their business needs, can just start to learn the official document of the contestants even if there is a minority, so, most just learn angular friends actually do not understand the principle, But I feel like I'm going to use it.

So much to say, so let's see if a novice is just beginning to assign a data model to the scope and do a two-way binding, the luck is not so good. In this case, you will encounter the above hole, first look at the code

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>
</div>

//javascript
function Outerctrl ($scope) {
  $ Scope.a = 1;
}
function Innerctrl () {}

The above code is an example of a very simple two-way binding. After the page is loaded, the external Div and the internal Div will show 1. When you press the Increment button, you will find that only 1 of the internal changes to 2, continue to press the same, only the internal number will increase. So this time, the novice often panic, said the magic two-way binding it?

Angular in the scope of the pit 2

This time the baby is a little bit emotional, stackoverflow walk up, the official document went up, finally found that there is a solution, such as a write a property of an object 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 "> Increments </button>
  </div>
</div>

//javascript
function Outerctrl ($scope {
  $scope. data = {
    a:1
  };
}
function Innerctrl () {}

Then found, incredibly can work, two numbers are followed by increments, I am the king of two-way binding ... And then throw it aside and no matter how specific the principle continues to learn the next part of the tutorial. This is actually my first learning angular course, I am ashamed to do the application deployment to the production environment just remember to study the internal principle.

The pits are always filled.

Nonsense said so much, the pit also went to step, the following into the landfills stage, that is why the hole is why the object can be written to solve the attributes. Actually know the principle, it is very easy to understand. Angular's internal and external scopes are based on the JavaScript prototype chain to implement the inheritance, and only use the prototype chain inheritance method, a little JavaScript based friends should be able to react instantaneously, The reference type value in the subclass prototype object and the reference type value in the parent class instance object are referenced by the same the base type value overrides the base type value in the parent object, which is also the reason for the combination inheritance, since the light use of the prototype chain inheritance brings an appeal problem, a little far away.

Anyway, here we can look at the first example:

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's constructor to an external scope object, so that the resulting internal scope object inherits the attribute a from the external object outer. This property is a basic type value that is accessed by the property A of the inner object. Because the intrinsic object itself does not have such a property, it looks for it from its prototype object, which exists in the prototype object outer, and returns a value that is fine, but if we assign a value to a property of an intrinsic scope object , the problem comes out. inner.a = inner.a + 1; This statement actually does the previous procedure of looking up a property value, the returned value is then assigned to the a property of the internal scope object, because the A property does not exist, so a basic type Value property of a is created, masking the A attribute in the outer scope object outer, the pit is out. 。

Therefore, if we replace the base type value attribute with the reference type value attribute, the problem can be resolved because the corresponding property of the two objects is the same reference type value that is referenced, regardless of where the modification will be reflected on all references to the object.

Summarize

The above is about the scope of the angular need to pay attention to the whole contents of the pit, I hope the content of this article for you to learn the scope of angular can help.