Go: In-depth understanding of the Scope of AngularJS

View DEMO. Refer to StackOverflow.

Ng-switch

Ng-switch's prototype inherits the same as Ng-include. So if you need to bind a basic type of data two-way, use a $parent, or change it to an object object and bind to the property of the objects, prevent child scopes from overriding the properties of the parent scope.

Refer to AngularJS, bind scope of a switch-case?

Ng-repeat

Ng-repeat is a little different. Suppose in our controller:

$scope. myarrayofprimitives = [one by one], $scope. myarrayofobjects = [{num:101}, {num:202}]

There is also HTML:

<ul> <li ng-repeat= "num in myarrayofprimitives" > <input ng-model= "num" > </li> <ul><ul> <li ng-repeat= "obj in myarrayofobjects" > <input ng-model= "Obj.num" > </li><ul>

For each item,ng-repeat to create a new scope, each scope inherits the parent scope, but the value of Item is also assigned to the new scope (the new property's name is the variable name of the loop). The source code of Angular Ng-repeat is actually this:

Childscope = scope. $new (); Child scope prototype inherits parent Scope ... Childscope[valueident] = value; Create a new Childscope property

If item is an underlying data type (like Myarrayofprimitives), its value is copied to a new child scope property. Changing the child Scope property value (for example, with Ng-model, that is num ) does not change the array that the parent scope refers to. So in the first ng-repeat above, each sub-scope obtains num properties independent of the myarrayofprimitives array:

This kind of ng-repeat is different from what you expected. In Angular 1.0.2 and earlier versions, entering a text box will change the value of the gray lattice, which is only visible in the child Scope. After Angular 1.0.3+, the input text will no longer have any effect. (Refer to the explanation on StackOverflow) we want the input to change the myarrayofprimitives array, not the attributes in the sub Scope. For this we must change the model to an array of objects (array of objects).

So if item is an object, then a reference to the original object (not a copy) is assigned to the new Child Scope property. Changing the value of the child scope property (using Ng-model, or obj.num) also alters the object referenced by the parent scope. So the second ng-repeat above can be expressed as:

That's what we want. Entering into a text box changes the value of the gray lattice, which is visible in both the parent scope and the child scope.

Refer to difficulty with Ng-model, ng-repeat, and inputs as well as ng-repeat and databinding.

Ng-controller

Nesting with ng-controller results in the same way as ng-include and Ng-switch are normal prototype inheritance. So the same is not to repeat the same thing. However, "Two controllers use $scope inheritance to share information is considered a bad practice" (from here), you should use the service to share data between controllers.

If you really want to share the data through inheritance, there is nothing special to do, and child scope can directly access all the properties of the parent scope. Refer to Controller load order differs when loading or navigating.

Directives

This is to be discussed in the context of the situation.

2. scope: falseThe default –directive does not create a new Scope, so there is no prototype inheritance. This may seem simple, but also dangerous, because you would think that directive created a new property in Scope, but actually it only used an existing property. This is not good for writing reusable modules and components.
4. scope: true– Directive creates a new child scope and inherits the parent scope. If there are multiple directive on the same DOM node to create a new scope, only a new scope is created. Because of the normal stereotype inheritance, as with Ng-include, Ng-switch, you should pay attention to the two-way binding of the underlying type data, and the child scope property overrides the parent scope property with the same name.
5. scope: { ... }– At this point directive creates a separate scope with no prototype inheritance. This is a good choice when writing reusable modules and components because directive does not inadvertently read and write to the parent scope. However, sometimes such directives often require access to the properties of the parent scope. The object hash is used to establish a two-way binding (using ' = ') or one-way binding (using ' @ ') between this independent scope and the parent scope. There is also an expression ' & ' used to bind the parent Scope. These all derive from the parent scope to create a local scope property. Note that the HTML attribute is used to establish the binding, and you cannot refer to the property name of the parent Scope in the object hash, you must use an HTML property. For example<div my-directive>Andscope: { localProp: ‘@parentProp‘ }It is not possible to bind the parent attribute parentprop to the standalone scope, you must specify this:<div my-directive the-Parent-Prop=parentProp>Andscope: { localProp: ‘@theParentProp‘ }。 In a separate scope__proto__A Scope object (orange-yellow object) is referenced, and the $parent of the independent scope points to the parent scope, so although it is independent and does not inherit from the parent scope prototype, it is still a child scope.
   
   In the following figure, we have<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">Andscope: { interpolatedProp: ‘@interpolated‘, twowayBindingProp: ‘=twowayBinding‘ }。
   At the same time, suppose directive in its link function.scope.someIsolateProp = "I‘m isolated"
   
   
   
   Note: In the link function, use theattrs.$observe(‘attr_name‘, function(value) { ... }To get the property values that are replaced with the ' @ ' symbol in the standalone Scope. For example, in the link function there isattrs.$observe(‘interpolated‘, function(value) { ... }The value will be set to 11. （scope.interpolatedPropIn the link function is undefined, insteadscope.twowayBindingPropdefined in the link function because the ' = ' symbol is used)
   More reference http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/
7. transclude: true– At this point directive creates a new "transcluded" child scope, inheriting the parent scope. So if the content in the template fragment, such as those that will replace Ng-transclude, requires two-way binding on the base type data of the parent scope, using the $parent, or the properties of the model object, prevent the child scope property from overriding the parent scope property.
   
   Transcluded and independent scope (if any) are siblings, each scope $parent point to the same parent scope. When both scope and standalone scope exist in the template, the standalone scope property $ $nextSibling will point to scope in the template.
   For more information about the transcluded scope, refer to AngularJS, the binding not working in directive with transcluded scope.
   
   
   In, assuming that directive is the same as in the previous diagram, it's just moretransclude: true
   
   
   To view the online DEMO, the example has a showscope () function that can be used to check the independent scope and its associated transcluded scope.

Summarize

A total of four scopes:

1. Common prototype inheritance of Scope--ng-include, Ng-switch, ng-controller, directive withscope: true
2. Generic prototype inherits the Scope but copy assignment--ng-repeat. Each ng-repeat loop creates a new child scope, and the child scope always gets the new property.
3. Independent isolate scope--directive with scope: {...} . It is not a prototype inheritance, but ' = ', ' @ ' and ' & ' provide a mechanism to access the parent Scope property.
4. Transcluded scope--directive with transclude: true . It also follows prototype inheritance, but it is also the brother of any isolate scope.

For all Scope,angular, the parent-child relationship is always recorded through the $parent of the Scope, $ $childHead, and the $childTail property.

Go: In-depth understanding of the Scope of AngularJS