AngularJS 範圍Scope的繼承

轉載自：http://www.angularjs.cn/A09C 以下方式會建立新的子範圍，並且進行原型繼承： ng-repeat、ng-include、ng-switch、ng-view、ng-controller, 用scope: true和transclude: true建立directive。 以下方式會建立新的獨立範圍，不會進行原型繼承：用scope: { ... }建立directive。這樣建立的範圍被稱為"Isolate"範圍。

注意：預設情況下建立directive使用了scope: false，不會建立子範圍。

進行原型繼承即意味著父範圍在子範圍的原型鏈上，這是JavaScript的特性。AngularJS的範圍還存在如下內部定義的關係： scope.$parent指向scope的父範圍； scope.$$childHead指向scope的第一個子範圍； scope.$$childTail指向scope的最後一個子範圍； scope.$$nextSibling指向scope的下一個相鄰範圍； scope.$$prevSibling指向scope的上一個相鄰範圍；

這些關係用於AngularJS內部曆遍，如$broadcast和$emit事件廣播，$digest處理等。 ng-include

In controller:

$scope.myPrimitive = 50;$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>

每一個ng-include指令都建立一個子範圍, 並且會從父範圍進行原型繼承。

在第一個input框輸入"77"將會導致子範圍中建立一個同名屬性，其值為77，這不是你想要的結果。

在第二個input框輸入"99"會直接修改父範圍的myObject對象，這就是JavaScript原型繼承機制的作用。

(註：上圖存在錯誤，紅色99因為是50，11應該是99)

如果我們不想把model由原始類型改成參考型別——對象，我們也可以使用$parent直接操作父範圍：

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

輸入"22"我們得到了想要的結果。

另一種方法就是使用函數，在父範圍定義函數，子範圍通過原型繼承可運行該函數：

// in the parent scope$scope.setMyPrimitive = function(value) {    $scope.myPrimitive = value;}

請參考：

sample fiddle that uses this "parent function" approach. (This was part of aStack Overflow post.)

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

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

ng-switch與ng-include一樣。

參考： AngularJS, bind scope of a switch-case? ng-view

ng-view與ng-include一樣。 ng-repeat

Ng-repeat也建立子範圍，但有些不同。

In controller:

$scope.myArrayOfPrimitives = [ 11, 22 ];$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對每一個迭代項Item都會建立子範圍, 子範圍也從父範圍進行原型繼承。 但它還是會在子範圍中建立同名屬性，把Item賦值給對應的子範圍的同名屬性。 下面是AngularJS中ng-repeat的部分原始碼：

childScope = scope.$new(); // child scope prototypically inherits from parent scope ...     childScope[valueIdent] = value; // creates a new childScope property

如果Item是原始類型(如myArrayOfPrimitives的11、22), 那麼子範圍中有一個新屬性（如num），它是Item的副本（11、22）. 修改子範圍num的值將不會改變父範圍myArrayOfPrimitives，所以在上一個ng-repeat，每一個子範圍都有一個num 屬性，該屬性與myArrayOfPrimitives無關聯：

顯然這不會是你想要的結果。我們需要的是在子範圍中修改了值後反映到myArrayOfPrimitives數組。我們需要使用參考型別的Item，如上面第二個