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

定義在作用于上的屬性對他的子級作用于來說是可見的，試想一下，子級作用域并不需要重復定義同名的屬性！這在實踐中是非常有用的，因為我們不必一遍又一遍的重復定義本來可以通過作用域鏈得到的那些屬性。

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

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

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

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

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

貫穿作用域鏈的繼承的風險

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

讓我們來看看，如果我們在一個作用域上定義了一個變量，先不管是否在子級作用域上。JavaScript代碼如下：

var HelloCtrl = function ($scope) {
};

視圖的代碼如下：

 
    
Hello, {{name}}
    

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

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

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

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

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

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

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

 
    
Hello, {{thing.name}}
    

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

這個方案會更可靠，因為他并沒有假設(shè) DOM 樹的結(jié)構(gòu)是什么樣子。

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

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

作用域?qū)蛹壓褪录到y(tǒng)

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

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

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

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

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

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

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

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

作用域的生命周期

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

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

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