一、遇到的問題
問題發(fā)生在使用 AngularJS 嵌套 Controller 的時候。因為每個 Controller 都有它對應的 Scope（相當于作用域、控制范圍），所以 Controller 的嵌套，也就意味著 Scope 的嵌套。這個時候如果兩個 Scope 內(nèi)都有同名的 Model 會發(fā)生什么呢？從子 Scope 怎樣更新父 Scope 里的 Model 呢？

這個問題很典型，比方說當前頁面是一個產(chǎn)品列表，那么就需要定義一個 ProductListController

function ProductListController($scope, $http) {  $http.get('/api/products.json')    .success(function(data){      $scope.productList = data;    });  $scope.selectedProduct = {};}

你大概看到了在 Scope 里還定義了一個 selectedProduct 的 Model，表示選中了某一個產(chǎn)品。這時會獲取該產(chǎn)品詳情，而頁面通過 AngularJS 中的 $routeProvider 自動更新，拉取新的詳情頁模板，模板中有一個 ProductDetailController

function ProductDetailController($scope, $http, $routeParams) {  $http.get('/api/products/'+$routeParams.productId+'.json')    .success(function(data){      $scope.selectedProduct = data;    });}

有趣的事情發(fā)生了，在這里也有一個 selectedProduct ，它會怎樣影響 ProductListController 中的 selectedProduct 呢？

答案是沒有影響。在 AnuglarJS 里子 Scope 確實會繼承父 Scope 中的對象，但當你試下對基本數(shù)據(jù)類型（string, number, boolean）的 雙向數(shù)據(jù)綁定 時，就會發(fā)現(xiàn)一些奇怪的行為，繼承并不像你想象的那樣工作。子 Scope 的屬性隱藏（覆蓋）了父 Scope 中的同名屬性，對子 Scope 屬性（表單元素）的更改并不更新父 Scope 屬性的值。這個行為實際上不是 AngularJS 特有的，JavaScript 本身的原型鏈就是這樣工作的。開發(fā)者通常都沒有意識到 ng-repeat, ng-switch, ng-view 和 ng-include 統(tǒng)統(tǒng)都創(chuàng)建了他們新的子 scopes，所以在用到這些 directive 時也經(jīng)常出問題。

二、解決的辦法
解決的辦法就是不使用基本數(shù)據(jù)類型，而在 Model 里永遠多加一個點.

使用

<input type="text" ng-model="someObj.prop1">

來替代

<input type="text" ng-model="prop1">

是不是很坑爹？下面這個例子很明確地表達了我所想表達的奇葩現(xiàn)象

app.controller('ParentController',function($scope){  $scope.parentPrimitive = "some primitive"  $scope.parentObj = {};  $scope.parentObj.parentProperty = "some value";});app.controller('ChildController',function($scope){  $scope.parentPrimitive = "this will NOT modify the parent"  $scope.parentObj.parentProperty = "this WILL modify the parent";});

查看 在線演示 DEMO
但是我真的確實十分很非常需要使用 string number 等原始數(shù)據(jù)類型怎么辦呢？2 個方法――

在子 Scope 中使用 $parent.parentPrimitive。 這將阻止子 Scope 創(chuàng)建它自己的屬性。
在父 Scope 中定義一個函數(shù)，讓子 Scope 調(diào)用，傳遞原始數(shù)據(jù)類型的參數(shù)給父親，從而更新父 Scope 中的屬性。（并不總是可行）
三、JavaScript 的原型鏈繼承
吐槽完畢，我們來深入了解一下 JavaScript 的原型鏈。這很重要，特別是當你從服務器端開發(fā)轉(zhuǎn)到前端，你應該會很熟悉經(jīng)典的 Class 類繼承，我們來回顧一下。

假設父類 parentScope 有如下成員屬性 aString, aNumber, anArray, anObject, 以及 aFunction。子類 childScope 原型繼承父類 parentScope，于是我們有：

如果子 Scope 嘗試去訪問 parentScope 中定義的屬性，JavaScript 會先在子 Scope 中查找，如果沒有該屬性，則找它繼承的 scope 去獲取屬性，如果繼承的原型對象 parentScope 中都沒有該屬性，那么繼續(xù)在它的原型中尋找，從原型鏈一直往上直到到達 rootScope。所以，下面的表達式結(jié)果都是 ture：

childScope.aString === 'parent string'childScope.anArray[1] === 20childScope.anObject.property1 === 'parent prop1'childScope.aFunction() === 'parent output'

假設我們執(zhí)行下面的語句

childScope.aString = 'child string'

原型鏈并沒有被查詢，反而是在 childScope 中增加了一個新屬性 aString。這個新屬性隱藏（覆蓋）了 parentScope 中的同名屬性。在下面我們討論 ng-repeat 和 ng-include 時這個概念很重要。

假設我們執(zhí)行這個操作：

childScope.anArray[1] = '22'childScope.anObject.property1 = 'child prop1'

原型鏈被查詢了，因為對象 anArray 和 anObject 在 childScope 中沒有找到。它們在 parentScope 中被找到了，并且值被更新。childScope 中沒有增加新的屬性，也沒有任何新的對象被創(chuàng)建。（注：在 JavaScript 中，array 和 function 都是對象）

假設我們執(zhí)行這個操作：

childScope.anArray = [100, 555]childScope.anObject = { name: 'Mark', country: 'USA' }

原型鏈沒有被查詢，并且子 Scope 新加入了兩個新的對象屬性，它們隱藏（覆蓋）了 parentScope 中的同名對象屬性。

應該可以總結(jié)

如果讀取 childScope.propertyX，并且 childScope 有屬性 propertyX，那么原型鏈沒有被查詢。
如果設置 childScope.propertyX，原型鏈不會被查詢。
最后一種情況，

delete childScope.anArraychildScope.anArray[1] === 22 // true

我們從 childScope 刪除了屬性，則當我們再次訪問該屬性時，原型鏈會被查詢。刪除對象的屬性會讓來自原型鏈中的屬性浮現(xiàn)出來。

四、AngularJS 的 Scope 繼承
創(chuàng)建新的 Scope，并且原型繼承：ng-repeat, ng-include, ng-switch, ng-view, ng-controller, directive with scope: true, directive with transclude: true
創(chuàng)建新的 Scope，但不繼承：directive with scope: { ... }。它會創(chuàng)建一個獨立 Scope。
注：默認情況下 directive 不創(chuàng)建新 Scope，即默認參數(shù)是 scope: false。

ng-include

假設在我們的 controller 中，

$scope.myPrimitive = 50;$scope.myObject  = {aNumber: 11};

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 會生成一個子 Scope，每個子 Scope 都繼承父 Scope。

輸入（比如”77″）到第一個 input 文本框，則子 Scope 將獲得一個新的 myPrimitive 屬性，覆蓋掉父 Scope 的同名屬性。這可能和你預想的不一樣。

輸入（比如”99″）到第二個 input 文本框，并不會在子 Scope 創(chuàng)建新的屬性，因為 tpl2.html 將 model 綁定到了一個對象屬性（an object property），原型繼承在這時發(fā)揮了作用，ngModel 尋找對象 myObject 并且在它的父 Scope 中找到了。

如果我們不想把 model 從 number 基礎類型改為對象，我們可以用 $parent 改寫第一個模板：

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

輸入（比如”22″）到這個文本框也不會創(chuàng)建新屬性了。model 被綁定到了父 scope 的屬性上（因為 $parent 是子 Scope 指向它的父 Scope 的一個屬性）。

對于所有的 scope （原型繼承的或者非繼承的），Angular 總是會通過 Scope 的 $parent, $$childHead 和 $$childTail 屬性記錄父-子關(guān)系（也就是繼承關(guān)系），圖中為簡化而未畫出這些屬性。

在沒有表單元素的情況下，另一種方法是在父 Scope 中定義一個函數(shù)來修改基本數(shù)據(jù)類型。因為有原型繼承，子 Scope 確保能夠調(diào)用這個函數(shù)。例如，

// 父 Scope 中$scope.setMyPrimitive = function(value) {  $scope.myPrimitive = value;

查看 DEMO

ng-switch
ng-switch 的原型繼承和 ng-include 一樣。所以如果你需要對基本類型數(shù)據(jù)進行雙向綁定，使用 $parent，或者將其改為 object 對象并綁定到對象的屬性，防止子 Scope 覆蓋父 Scope 的屬性。
ng-repeat
ng-repeat 有一點不一樣。假設在我們的 controller 里：

$scope.myArrayOfPrimitives = [ 11, 22 ];$scope.myArrayOfObjects  = [{num: 101}, {num: 202}]

還有 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>

對于每一個 Item，ng-repeat 創(chuàng)建新的 Scope，每一個 Scope 都繼承父 Scope，但同時 item 的值也被賦給了新 Scope 的新屬性（新屬性的名字為循環(huán)的變量名）。Angular ng-repeat 的源碼實際上是這樣的：

childScope = scope.$new(); // 子 scope 原型繼承父 scope ...   childScope[valueIdent] = value; // 創(chuàng)建新的 childScope 屬性

如果 item 是一個基礎數(shù)據(jù)類型（就像 myArrayOfPrimitives），本質(zhì)上它的值被復制了一份賦給了新的子 scope 屬性。改變這個子 scope 屬性值（比如用 ng-model，即 num）不會改變父 scope 引用的 array。所以上面第一個 ng-repeat 里每一個子 scope 獲得的 num 屬性獨立于 myArrayOfPrimitives 數(shù)組：

這樣的 ng-repeat 和你預想中的不一樣。在 Angular 1.0.2 及更早的版本，向文本框中輸入會改變灰色格子的值，它們只在子 Scope 中可見。Angular 1.0.3+ 以后，輸入文本不會再有任何作用了。
我們希望的是輸入能改變 myArrayOfPrimitives 數(shù)組，而不是子 Scope 里的屬性。為此我們必須將 model 改為一個關(guān)于對象的數(shù)組（array of objects）。

所以如果 item 是一個對象，則對于原對象的一個引用（而非拷貝）被賦給了新的子 Scope 屬性。改變子 Scope 屬性的值（使用 ng-model，即 obj.num）也就改變了父 Scope 所引用的對象。所以上面第二個 ng-repeat 可表示為：

這才是我們想要的。輸入到文本框即會改變灰色格子的值，該值在父 Scope 和子 Scope 均可見。
ng-controller
使用 ng-controller 進行嵌套，結(jié)果和 ng-include 和 ng-switch 一樣是正常的原型繼承。所以做法也一樣不再贅述。然而“兩個 controller 使用 $scope 繼承來共享信息被認為是不好的做法”
應該使用 service 在 controller 間共享數(shù)據(jù)。

如果你確實要通過繼承來共享數(shù)據(jù)，那么也沒什么特殊要做的，子 Scope 可以直接訪問所有父 Scope 的屬性。
directives
這個要分情況來討論。

默認 scope: false