[AngularJS Series 2] scope

Scope is a very important concept in AngularJS. Simply put, it is used to save the objects of AngularJSModel. It is a warm family of models ~ So when did this small family make it? 1htmlng-appmainApp2html we know that ng-app is an entry point for an application to start AngularJS. Here, an r

Scope is a very important concept in AngularJS. Simply put, it is used to save the objects of AngularJS models. It is a warm family of models ~ So when did this small family make it? 1 html ng-app = mainApp 2/html we know that ng-app is an entry point for an application to start AngularJS. Here an r

Scope is a very important concept in AngularJS. Simply put, it is used to save the objects of AngularJS models. It is a warm family of models ~

So when did this small family make it?

1 2 

We know that,ng-appIs the entry point for an application to start AngularJS. Here, a root scope will also be created.$rootScopeTune to, each application can only have one root scope (of course ~ Root ~), But it has multiple child scopes. When will it create a child scope?

1 2     3         
4         
5         
 
 

  
  6             
  
  
{{item.name}}
7         
 
 
8     9 

In the above example,ng-controller ng-include ng-repeatAll created new child scope (ng-repeatIs to create a new child scope for each repeated element), the parent-child relationship between them is as follows:

The inclusion relationship is their parent-child relationship, and the sub-scope can access all models and functions bound to the parent scope.

AngularJS will add a class named ng-scope to the dom corresponding to the scope. If we add such a css ~

1 .ng-scope {border: 2px dotted red;}

We can also see the approximate scope through the red dotted border, but note that not all ng-scope are new scope, some ng-scope class names share the same dom.

Careful children's shoes may notice that,ng-controller="SubCtrl"Andng-includePut it on the same p. Why?ng-controller="SubCtrl"Dad,ng-includeWhat about a son?
There is no special reason for this,ng-controllerThe implementation in the underlying code of AngularJS is not relevant to the order indicated on p, but a problem occurs:

Assume thatng-includeCorrespondingtemplate.htmlThere is such code:

Template.html

1 

We will find thatng-controller="SubCtrl"This controller cannot be obtained.lastName.

The reason is ~
Let's assume thatng-controller="SubCtrl"Corresponding to Scope,ng-includeCorresponding to Scope B ~

1. ng-includeCreatedScope BYesng-controllerCreatedScopeSub-scope, so intemplate.htmlAccessibleScope.
2. Intemplate.htmlIn useng-modelThe Bound model is stored inScope BOn,ScopeIt cannot be obtained, even if the model has the same name.

Solution:

• DirectlyScopeTo bind a member object, as shown in figureng-model="user.lastName"
• Or intemplate.htmlUseng-modelWhen binding a model, add$parent(Take the parent scope), such:ng-model="$parent.lastName"In this way, info is boundScopeOn

The first method is recommended because the first method abstracts objects, which is better to encapsulate than all models in the second method that are directly tied to $ scope ~

Here is the official Scope introduction ~