Scope的層次結(jié)構(gòu)和繼承

定義在作用于上的屬性對(duì)他的子級(jí)作用于來(lái)說(shuō)是可見(jiàn)的，試想一下，子級(jí)作用域并不需要重復(fù)定義同名的屬性！這在實(shí)踐中是非常有用的，因?yàn)槲覀儾槐匾槐橛忠槐榈闹貜?fù)定義本來(lái)可以通過(guò)作用域鏈得到的那些屬性。

再來(lái)看看前面的例子，假設(shè)我們想要顯示給出的這些國(guó)家與世界總?cè)丝诘陌俜直?。要?shí)現(xiàn)這個(gè)功能，我們可以在一個(gè)作用域上定義一個(gè) worldsPercentage 的方法，并由 WorldCtrl 來(lái)管理，如下所以：

$scope.worldsPercentage = function (countryPopulation) { 
    return (countryPopulation / $scope.population)*100;
}

然后被 ng-repeat 創(chuàng)建的每一個(gè)作用域?qū)嵗紒?lái)調(diào)用這個(gè)方法，如下：

    {{country.name}} has population of {{country.population}},
    {{worldsPercentage(country.population)}} % of the World"s
   population

AngularJS中作用域的繼承規(guī)則跟 JavaScript 中原型的繼承規(guī)則是相同的（在需要讀取一個(gè)屬性的時(shí)候，會(huì)一直向繼承樹(shù)的上方查詢(xún)，直到找到了這個(gè)屬性為止）。

貫穿作用域鏈的繼承的風(fēng)險(xiǎn)

這種透過(guò)作用域?qū)哟侮P(guān)系的繼承，在讀數(shù)據(jù)的時(shí)候顯得非常的直觀、易于理解。但是在寫(xiě)數(shù)據(jù)的時(shí)候，就變的有點(diǎn)復(fù)雜了。

讓我們來(lái)看看，如果我們?cè)谝粋€(gè)作用域上定義了一個(gè)變量，先不管是否在子級(jí)作用域上。JavaScript代碼如下：

var HelloCtrl = function ($scope) {
};

視圖的代碼如下：

 
    
Hello, {{name}}
    

        Say hello to: 
        
Hello, {{name}}!
 
    

運(yùn)行一下這段代碼，就可以發(fā)現(xiàn)，這個(gè) name 變量盡管僅僅是定義在了最頂級(jí)的作用域上，但在整個(gè)應(yīng)用中都是可見(jiàn)的！這說(shuō)明變量是從作用域鏈上繼承下來(lái)的。換句話說(shuō)，變量是在父級(jí)作用域上定義的，然后在子級(jí)作用域中訪問(wèn)的。

現(xiàn)在，我們一起來(lái)看看，如果在 中寫(xiě)點(diǎn)字會(huì)發(fā)生什么，結(jié)果如下圖所示：

你可能會(huì)感到吃驚，因?yàn)?HelloCtrl 控制器所初始化的作用域創(chuàng)建了一個(gè)新的變量，而不是直接去修改 $rootScope 實(shí)例中的值。不過(guò)當(dāng)我們認(rèn)識(shí)到作用域也只不過(guò)是在彼此間進(jìn)行了原型繼承，也就不會(huì)覺(jué)得那么吃驚了。所有可以用在 JavaScript 對(duì)象上的原型繼承的規(guī)則，都可以同等的用在 作用域 的原型鏈繼承上去。畢竟 Scopes 作用域就是 JavaScript 對(duì)象嘛。

在子級(jí)作用域中去改變父級(jí)作用域上面的屬性有幾種方法。第一種，我們就直接通過(guò) $parent 屬性來(lái)引用父級(jí)作用域，但我們要看到，這是一個(gè)非常不可靠的解決方案。麻煩之處就在于，ng-model 指令所使用的表達(dá)式非常嚴(yán)重的依賴(lài)于整個(gè)DOM結(jié)構(gòu)。比如就在 標(biāo)簽上面的哪里插入另一個(gè) 可創(chuàng)建作用域 的指令，那 $parent 就會(huì)指向一個(gè)完全不同的作用域了。

  
就經(jīng)驗(yàn)來(lái)講，盡量避免使用 $parent 屬性，因?yàn)樗鼜?qiáng)制的把 AngularJS 表達(dá)式和你的模板所創(chuàng)建的 DOM 結(jié)構(gòu)捆綁在了一起。這樣一來(lái)，HTML結(jié)構(gòu)的一個(gè)小小的改動(dòng)，都可能會(huì)讓整個(gè)應(yīng)用崩潰。

另一個(gè)解決方案就是，不要直接把屬性綁定到 作用域上，而是綁到一個(gè)對(duì)象上面，如下所示：

 
    
Hello, {{thing.name}}
    

        Say hello to: 
        
Hello, {{thing.name}}!
 
    

這個(gè)方案會(huì)更可靠，因?yàn)樗](méi)有假設(shè) DOM 樹(shù)的結(jié)構(gòu)是什么樣子。

  
避免直接把數(shù)據(jù)綁定到 作用域的屬性上。應(yīng)優(yōu)先選擇把數(shù)據(jù)雙向綁定到對(duì)象的屬性上（然后再把對(duì)象掛到 scope 上）。

  就經(jīng)驗(yàn)而言，在給 ng-model 指令的表達(dá)式中，你應(yīng)該有一個(gè)點(diǎn)（例如， ng-model="thing.name"）。

作用域?qū)蛹?jí)和事件系統(tǒng)

層級(jí)關(guān)系中的作用域可以使用 event bus（一種事件系統(tǒng)）。AngularJS可以在作用域?qū)蛹?jí)中傳播具名的裝備齊全的事件。事件可以從任何一個(gè)作用域中發(fā)出，然后向上（$emit）和向下（$broadcast）四處傳播。

AngularJS核心服務(wù)和指令使用這種事件巴士來(lái)發(fā)出一些應(yīng)用程序狀態(tài)變化的重要事件。比如，我們可以監(jiān)聽(tīng) $locationChangeSuccess 事件（由 $rootScope 實(shí)例發(fā)出），然后在任何 location（瀏覽器中就是URL）變化的時(shí)候都會(huì)得到通知，如下所示：

$scope.$on("$locationChangeSuccess", function(event, newUrl, oldUrl){ 
    //react on the location change here
    //for example, update breadcrumbs based on the newUrl
});

每一個(gè)作用域?qū)ο蠖紩?huì)有這個(gè) $on 方法，可以用來(lái)注冊(cè)一個(gè)作用域事件的偵聽(tīng)器。這個(gè)函數(shù)所扮演的偵聽(tīng)器在被調(diào)用時(shí)會(huì)有一個(gè) event 對(duì)象作為第一個(gè)參數(shù)。后面的參數(shù)會(huì)根據(jù)事件類(lèi)型的不同與事件本身的配備一一對(duì)應(yīng)。

類(lèi)似于 DOM 事件，我們可以調(diào)用 event 對(duì)象的 preventDefault() 和 stopPropagation() 方法。stopPropagation() 方法將會(huì)阻止事件沿著作用域?qū)蛹?jí)繼續(xù)冒泡，并且只在事件向上層傳播的時(shí)候（$emit）才有效。

  
盡管 AngularJS 的事件系統(tǒng)是模仿了 DOM 的，但兩個(gè)事件傳播系統(tǒng)是完全獨(dú)立的，沒(méi)有任何共同之處。

雖然在作用域?qū)蛹?jí)中傳播事件對(duì)一些問(wèn)題來(lái)說(shuō)是一種非常優(yōu)雅方案（特別是對(duì)全局的，異步的狀態(tài)變化來(lái)說(shuō)），但還是要適度使用。通常情況下，可以依靠雙向數(shù)據(jù)綁定來(lái)得到一個(gè)比較干凈的方案。在整個(gè) AngularJS 框架中，一共只發(fā)出（$emit）了三個(gè)事件（$includeContentRequested,$includeContentLoaded,$viewContentLoaded）和七個(gè)廣播（$broadcast）（$locationChangeStart, $locationChangeSuccess, $routeUpdate, $routeChangeStart, $routeChangeSuccess, $routeChangeError, $destroy）。正如你所看到的，作用域事件使用的非常少，我們應(yīng)該在發(fā)送自定義的事件之前認(rèn)真的評(píng)估一下其他的可選方案（多數(shù)會(huì)是雙向數(shù)據(jù)綁定）。

  
千萬(wàn)不要在 AngularJS 中模仿 DOM 的基于事件的編程方式。大多數(shù)情況下，你的應(yīng)用會(huì)有更好的架構(gòu)方式，你也可以在雙向數(shù)據(jù)綁定這條路上深入探索。

作用域的生命周期

作用域需要提供相互隔離的命名空間，避免變量的命名沖突。作用域們都很小，而且被以層級(jí)的方式組織起來(lái)，對(duì)內(nèi)存使用的管理來(lái)說(shuō)很有幫助。當(dāng)其中一個(gè)作用域不再需要 ，它就可以被銷(xiāo)毀了。結(jié)果就是，這個(gè)作用域所暴露出來(lái)的模型和方法就符合的垃圾回收的標(biāo)準(zhǔn)。

新的作用域通常是被 可創(chuàng)建作用域 的指令所生成和銷(xiāo)毀的。不過(guò)也可以使用 $new() 和 $destroy() 方法來(lái)手動(dòng)的創(chuàng)建和銷(xiāo)毀作用域。

轉(zhuǎn)載請(qǐng)注明來(lái)自[超2真人]
本文鏈接：http://www.peichao01.com/static_content/doc/html/Mastering_Web_Application_Development_with_AngularJS_3.html