Scope的層次結構和繼承

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

再來看看前面的例子，假設我們想要顯示給出的這些國家與世界總人口的百分比。要實現這個功能，我們可以在一個作用域上定義一個 worldsPercentage 的方法，并由 WorldCtrl 來管理，如下所以：

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

然后被 ng-repeat 創建的每一個作用域實例都來調用這個方法，如下：

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

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

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

這種透過作用域層次關系的繼承，在讀數據的時候顯得非常的直觀、易于理解。但是在寫數據的時候，就變的有點復雜了。

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

var HelloCtrl = function ($scope) {
};

視圖的代碼如下：

 
    
Hello, {{name}}
    

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

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

現在，我們一起來看看，如果在 中寫點字會發生什么，結果如下圖所示：

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

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

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

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

 
    
Hello, {{thing.name}}
    

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

這個方案會更可靠，因為他并沒有假設 DOM 樹的結構是什么樣子。

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

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

作用域層級和事件系統

層級關系中的作用域可以使用 event bus（一種事件系統）。AngularJS可以在作用域層級中傳播具名的裝備齊全的事件。事件可以從任何一個作用域中發出，然后向上（$emit）和向下（$broadcast）四處傳播。

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

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

每一個作用域對象都會有這個 $on 方法，可以用來注冊一個作用域事件的偵聽器。這個函數所扮演的偵聽器在被調用時會有一個 event 對象作為第一個參數。后面的參數會根據事件類型的不同與事件本身的配備一一對應。

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

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

雖然在作用域層級中傳播事件對一些問題來說是一種非常優雅方案（特別是對全局的，異步的狀態變化來說），但還是要適度使用。通常情況下，可以依靠雙向數據綁定來得到一個比較干凈的方案。在整個 AngularJS 框架中，一共只發出（$emit）了三個事件（$includeContentRequested,$includeContentLoaded,$viewContentLoaded）和七個廣播（$broadcast）（$locationChangeStart, $locationChangeSuccess, $routeUpdate, $routeChangeStart, $routeChangeSuccess, $routeChangeError, $destroy）。正如你所看到的，作用域事件使用的非常少，我們應該在發送自定義的事件之前認真的評估一下其他的可選方案（多數會是雙向數據綁定）。

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

作用域的生命周期

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

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

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