ng-include

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



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



如果我們不想把 model 從 number 基礎(chǔ)類型改為對(duì)象，我們可以用 $parent 改寫第一個(gè)模板：



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



對(duì)于所有的 scope （原型繼承的或者非繼承的），Angular 總是會(huì)通過 Scope 的 $parent, $$childHead 和 $$childTail 屬性記錄父-子關(guān)系（也就是繼承關(guān)系），圖中為簡化而未畫出這些屬性。
在沒有表單元素的情況下，另一種方法是在父 Scope 中定義一個(gè)函數(shù)來修改基本數(shù)據(jù)類型。因?yàn)橛性屠^承，子 Scope 確保能夠調(diào)用這個(gè)函數(shù)。例如，



查看 DEMO
ng-switch

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

ng-repeat

ng-repeat 有一點(diǎn)不一樣。假設(shè)在我們的 controller 里：



還有 HTML：


 

 
 


 

 
 



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



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



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

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



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

ng-controller

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

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

directives

這個(gè)要分情況來討論。
默認(rèn) scope: false – directive 不會(huì)創(chuàng)建新的 Scope，所以沒有原型繼承。這看上去很簡單，但也很危險(xiǎn)，因?yàn)槟銜?huì)以為 directive 在 Scope 中創(chuàng)建了一個(gè)新的屬性，而實(shí)際上它只是用到了一個(gè)已存在的屬性。這對(duì)編寫可復(fù)用的模塊和組件來說并不好。

scope: true – 這時(shí) directive 會(huì)創(chuàng)建一個(gè)新的子 scope 并繼承父 scope。如果在同一個(gè) DOM 節(jié)點(diǎn)上有多個(gè) directive 都要?jiǎng)?chuàng)建新 scope，則只有一個(gè)新 Scope 會(huì)創(chuàng)建。因?yàn)橛姓５脑屠^承，所以和 ng-include， ng-switch 一樣要注意基礎(chǔ)類型數(shù)據(jù)的雙向綁定，子 Scope 屬性會(huì)覆蓋父 Scope 同名屬性。

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



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



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

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

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



查看 在線 DEMO，例子里有一個(gè) showScope() 函數(shù)可以用來檢查獨(dú)立 Scope 和它關(guān)聯(lián)的 transcluded scope。

總結(jié)

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

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

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

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

對(duì)于所有的 Scope，Angular 總是會(huì)通過 Scope 的 $parent, $$childHead 和 $$childTail 屬性記錄父-子關(guān)系。
PS:scope和rootscope的區(qū)別

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

1，js代碼



2，html代碼

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


3，顯示結(jié)果

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


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




聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com