深入探究AngularJS框架中Scope對象的超級教程_AngularJS

ng-include

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



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



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



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



對于所有的 scope （原型繼承的或者非繼承的），Angular 總是會通過 Scope 的 $parent, $$childHead 和 $$childTail 屬性記錄父-子關系（也就是繼承關系），圖中為簡化而未畫出這些屬性。
在沒有表單元素的情況下，另一種方法是在父 Scope 中定義一個函數來修改基本數據類型。因為有原型繼承，子 Scope 確保能夠調用這個函數。例如，



查看 DEMO
ng-switch

ng-switch 的原型繼承和 ng-include 一樣。所以如果你需要對基本類型數據進行雙向綁定，使用 $parent，或者將其改為 object 對象并綁定到對象的屬性，防止子 Scope 覆蓋父 Scope 的屬性。

ng-repeat

ng-repeat 有一點不一樣。假設在我們的 controller 里：



還有 HTML：


 

 
 


 

 
 



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



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



這樣的 ng-repeat 和你預想中的不一樣。在 Angular 1.0.2 及更早的版本，向文本框中輸入會改變灰色格子的值，它們只在子 Scope 中可見。Angular 1.0.3+ 以后，輸入文本不會再有任何作用了。

我們希望的是輸入能改變 myArrayOfPrimitives 數組，而不是子 Scope 里的屬性。為此我們必須將 model 改為一個關于對象的數組（array of objects）。
所以如果 item 是一個對象，則對于原對象的一個引用（而非拷貝）被賦給了新的子 Scope 屬性。改變子 Scope 屬性的值（使用 ng-model，即 obj.num）也就改變了父 Scope 所引用的對象。所以上面第二個 ng-repeat 可表示為：



這才是我們想要的。輸入到文本框即會改變灰色格子的值，該值在父 Scope 和子 Scope 均可見。

ng-controller

使用 ng-controller 進行嵌套，結果和 ng-include 和 ng-switch 一樣是正常的原型繼承。所以做法也一樣不再贅述。然而“兩個 controller 使用 $scope 繼承來共享信息被認為是不好的做法”

應該使用 service 在 controller 間共享數據。
如果你確實要通過繼承來共享數據，那么也沒什么特殊要做的，子 Scope 可以直接訪問所有父 Scope 的屬性。

directives

這個要分情況來討論。
默認 scope: false – directive 不會創建新的 Scope，所以沒有原型繼承。這看上去很簡單，但也很危險，因為你會以為 directive 在 Scope 中創建了一個新的屬性，而實際上它只是用到了一個已存在的屬性。這對編寫可復用的模塊和組件來說并不好。

scope: true – 這時 directive 會創建一個新的子 scope 并繼承父 scope。如果在同一個 DOM 節點上有多個 directive 都要創建新 scope，則只有一個新 Scope 會創建。因為有正常的原型繼承，所以和 ng-include， ng-switch 一樣要注意基礎類型數據的雙向綁定，子 Scope 屬性會覆蓋父 Scope 同名屬性。

scope: { ... } – 這時 directive 創建一個獨立的 scope，沒有原型繼承。這在編寫可復用的模塊和組件時是比較好的選擇，因為 directive 不會不小心讀寫父 scope。然而，有時候這類 directives 又經常需要訪問父 scope 的屬性。對象散列（object hash）被用來建立這個獨立 Scope 與父 Scope 間的雙向綁定（使用 ‘='）或單向綁定（使用 ‘@'）。還有一個 ‘&' 用來綁定父 Scope 的表達式。這些統統從父 Scope 派生創建出本地的 Scope 屬性。注意，HTML 屬性被用來建立綁定，你無法在對象散列中引用父 Scope 的屬性名，你必須使用一個 HTML 屬性。例如， 和 scope: { localProp: '@parentProp' } 是無法綁定父屬性 parentProp 到獨立 scope的，你必須這樣指定： 以及 scope: { localProp: '@theParentProp' }。獨立的 scope 中 __proto__ 引用了一個 Scope 對象（下圖中的桔黃色 Object），獨立 scope 的 $parent 指向父 scope，所以盡管它是獨立的而且沒有從父 Scope 原型繼承，它仍然是一個子 scope。
下面的圖中，我們有  和 scope:



同時，假設 directive 在它的 link 函數里做了 scope.someIsolateProp = "I'm isolated"



注意：在 link 函數中使用 attrs.$observe('attr_name', function(value) { ... } 來獲取獨立 Scope 用 ‘@' 符號替換的屬性值。例如，在 link 函數中有 attrs.$observe('interpolated', function(value) { ... } 值將被設為 11. （scope.interpolatedProp 在 link 函數中是 undefined，相反scope.twowayBindingProp 在 link 函數中定義了，因為用了 ‘=' 符號）

transclude: true – 這時 directive 創建了一個新的 “transcluded” 子 scope，同時繼承父 scope。所以如果模板片段中的內容（例如那些將要替代 ng-transclude 的內容）要求對父 Scope 的基本類型數據進行雙向綁定，使用 $parent，或者將 model 一個對象的屬性，防止子 Scope 屬性覆蓋父 Scope 屬性。
transcluded 和獨立 scope （如果有）是兄弟關系，每個 Scope 的 $parent 指向同一個父 Scope。當模板中的 scope 和獨立 Scope 同時存在，獨立 Scope 屬性 $$nextSibling 將會指向模板中的 Scope。

在下圖中，假設 directive 和上個圖一樣，只是多了 transclude: true



查看 在線 DEMO，例子里有一個 showScope() 函數可以用來檢查獨立 Scope 和它關聯的 transcluded scope。

總結

一共有四種 Scope：
普通進行原型繼承的 Scope —— ng-include, ng-switch, ng-controller, directive with scope: true

普通原型繼承的 Scope 但拷貝賦值 —— ng-repeat。 每個 ng-repeat 的循環都創建新的子 Scope，并且子 Scope 總是獲得新的屬性。

獨立的 isolate scope —— directive with scope: {...}。它不是原型繼承，但 ‘=', ‘@' 和 ‘&' 提供了訪問父 Scope 屬性的機制。

transcluded scope —— directive with transclude: true。它也遵循原型繼承，但它同時是任何 isolate scope 的兄弟。

對于所有的 Scope，Angular 總是會通過 Scope 的 $parent, $$childHead 和 $$childTail 屬性記錄父-子關系。
PS:scope和rootscope的區別

scope是html和單個controller之間的橋梁，數據綁定就靠他了。rootscope是各個controller中scope的橋梁。用rootscope定義的值，可以在各個controller中使用。下面用實例詳細的說明一下。

1，js代碼



2，html代碼

 
 I set the global variable.{{$root.name}} 
 
 
 
 1,get global variable .{{name}}
 
 2,get global variable .{{$root.name}} 
 


3，顯示結果

I set the global variable.this is test 
1,get global variable .this is test 
2,get global variable .this is test 


由結果可以看出來，$rootScope.name設置的變量，在所有controller里面都是可以直接用{{$root.name}}來顯示的，很強大。那當然也可以賦值給scope. 




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com