Inheritance of ANGULARJS scope scope

Reprinted from: Http://www.angularjs.cn/A09C The following methods create new child scopes and perform prototype inheritance: Ng-repeat, Ng-include, Ng-switch, Ng-view, Ng-controller, Create directive with Scope:true and transclude:true. The following methods create a new stand-alone scope and do not inherit prototype: Use scope: {...} Create directive. The scope created by this is called the "isolate" scope.

Note: creating directive by default uses Scope:false and does not create child scopes.

Prototype inheritance means that the parent scope is on the prototype chain of the child scope, which is a feature of JavaScript. The scope of the ANGULARJS also has the following internally defined relationships: scope. $parent to the parent scope of scope; scope.$ $childHead to the first child scope of scope; scope.$$ Childtail point to the last child scope of scope; scope.$ $nextSibling point to the next adjacent scope of scope; scope.$ $prevSibling point to the last adjacent scope;

These relationships are used for ANGULARJS internal calendars, such as $broadcast and $emit event broadcasts, $digest processing, and so on. Ng-include

In controller:

$scope. myprimitive = m;
$scope. MyObject    = {anumber:11};

In HTML:

<script type= "Text/ng-template" id= "/tpl1.html" >
    <input ng-model= "myprimitive" >
</script >
<div ng-include src= "'/tpl1.html '" ></div> <script type= "text/ng-template" id= "

Tpl2.html ">
    <input ng-model=" Myobject.anumber ">
</script>
<div ng-include src=" '/ Tpl2.html ' "></div>

Each ng-include instruction creates a child scope and inherits it from the parent scope.

Entering "77" in the first input box will cause the child scope to create a new property with the same name, with a value of 77, which is not the result you want.

Entering "99" in the second input box modifies the MyObject object of the parent scope directly, which is the role of the JavaScript prototype inheritance mechanism.

(Note: There is an error in the image above, red 99 because it is 50,11 should be 99)

If we don't want to change the model from the original type to the reference type-the object, we can also use $parent to manipulate the parent scope directly:

<input ng-model= "$parent. Myprimitive" >

Enter "22" and we get the results we want.

Another method is to use a function that defines a function in the parent scope, which can be run by a child scope through prototype inheritance:

In the parent scope
$scope. setmyprimitive = function (value) {
    $scope. myprimitive = value
}

Please refer to:

Sample fiddle that uses this "parent function" approach. (This is part of Astack Overflow post.)

http://stackoverflow.com/a/13782671/215945

https://github.com/angular/angular.js/issues/1267. Ng-switch

Ng-switch is the same as ng-include.

Reference: Angularjs, bind scope of a switch-case? Ng-view

Ng-view is the same as ng-include. ng-repeat

Ng-repeat also creates child scopes, but somewhat differently.

In controller:

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

In 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>

Ng-repeat creates a child scope for each iteration item item, and the child scope inherits from the parent scope. However, it will create a new property with the same name in the child scope, and assign the item to the corresponding child scope's attribute of the same name. The following are some of the source code for ng-repeat in Angularjs:

Childscope = scope. $new (); Child Scope Prototypically inherits from parent scope ...     
Childscope[valueident] = value; Creates a new Childscope property

If item is the original type (such as Myarrayofprimitives 11, 22), the child scope has a new attribute (such as NUM), which is a copy of the item (11, 22). Modifying the value of the child scope Num will not change the parent scope myarrayofprimitives, so in the previous ng-repeat, each child scope has a num attribute that is not associated with myarrayofprimitives:

Obviously this is not the result you want. What we need is a modified value in the child scope to be reflected to the myarrayofprimitives array. We need to use the reference type of item, like the second above