深入解析AngularJS框架中$scope的作用與生命周期_AngularJS

有了 $scope 這樣一個橋梁,應用的業務代碼可以都在 controller 中,而數據都存放在controller 的 $scope 中.

$scope是一個把view（一個DOM元素）連結到controller上的對象。在我們的MVC結構里，這個 $scope 將成為model，它提供一個綁定到DOM元素（以及其子元素）上的excecution context。

盡管聽起來有點復雜，但 $scope 實際上就是一個JavaScript對象，controller和view都可以訪問它，所以我們可以利用它在兩者間傳遞信息。在這個 $scope 對象里，我們既存儲數據，又存儲將要運行在view上的函數。

每一個Angular應用都會有一個 $rootScope。這個 $rootScope 是最頂級的scope，它對應著含有 ng-app 指令屬性的那個DOM元素。

如果頁面上沒有明確設定 $scope ，Angular 就會把數據和函數都綁定到這里， 第一部分中的例子就是靠這一點成功運行的。

在這個例子里，我們將使用 $rootScope 。在main.js文件里，我們給這個scope加一個name屬性。把這個函數放進app.run函數里執行，我們就保證了它能在應用的其他部分之前被執行。你可以把app.run函數看作是Angular應用的main方法。

現在，我們可以在view的任何地方訪問這個name屬性，使用模版表達式{{}}，像這樣：

$rootScope
Angular 應用啟動并生成視圖時,會將根 ng-app 元素與 $rootScope 進行綁定.$rootScope 是所有 $scope 的最上層對象,可以理解為一個 Angular 應用中得全局作用域對象,所以為它附加太多邏輯或者變量并不是一個好主意,和污染 Javascript 全局作用域是一樣的.

$scope 的作用
$scope 對象在 Angular 中充當數據模型的作用,也就是一般 MVC 框架中 Model 得角色.但又不完全與通常意義上的數據模型一樣,因為 $scope 并不處理和操作數據,它只是建立了視圖和 HTML 之間的橋梁,讓視圖和 Controller 之間可以友好的通訊.

再進一步系統的劃分它的作用和功能:

在 Javascript 中創建一個新的執行上下文,實際就是用函數創建了一個新的本地上下文,在 Angular 中當為子 DOM 元素創建新的作用域時,其實就是為子 DOM 元素創建了一個新的執行上下文.

$scope 生命周期
Angular 中也有一個'事件'的概念,比如當一個綁定了 ng-model 的 input 值發生變化時,或者一個 ng-click 的 button 被點擊時,Angular 的事件循環就會啟動.事件循環是 Angular 中非常非常核心的一個概念,因為不是本文主旨所以不多說,感興趣的可以自己看看資料.這里事件就在 Angular 執行上下文中處理,$scope 就會對定義的表達式求值.此時事件循環被啟動, Angular 會監控應用程序內所有對象,臟值檢查循環也會啟動.

$scope 的生命周期有4個階段:

1. 創建

控制器或者指令創建時, Angular 會使用 $injector 創建一個新的作用域,然后在控制器或指令運行時,將作用域傳遞進去.

2. 鏈接

Angular 啟動后會將所有 $scope 對象附加或者說鏈接到視圖上,所有創建 $scope 對象的函數也會被附加到視圖上.這些作用域將會注冊當 Angular 上下文發生變化時需要運行的函數.也就是 $watch 函數, Angular 通過這些函數或者何時開始事件循環.

3. 更新

一旦事件循環開始運行,就會開始執行自己的臟值檢測.一旦檢測到變化,就會觸發 $scope 上指定的回調函數

4. 銷毀

通常來講如果一個 $scope 在視圖中不再需要, Angular 會自己清理它.當然也可以通過 $destroy() 函數手動清理.

ng-controller

要明確創建一個$scope 對象，我們就要給DOM元素安上一個controller對象，使用的是ng-controller 指令屬性：

ng-controller指令給所在的DOM元素創建了一個新的$scope 對象，并將這個$scope 對象包含進外層DOM元素的$scope 對象里。在上面的例子里，這個外層DOM元素的$scope 對象，就是$rootScope 對象。這個scope鏈是這樣的：

現在，MyController 給我們建立了一個可以從DOM元素內部直接訪問的$scope 對象。下面我們在的這個$scope 里創建一個person對象，在main.js中：

現在我們可以在有ng-controller='MyController'屬性的DOM元素的任何子元素里訪問這個person 對象，因為它在$scope上。
除了一個例外，所有scope都遵循原型繼承（prototypal inheritance），這意味著它們都能訪問父scope們。對任何屬性和方法，如果AngularJS在當前scope上找不到，就會到父scope上去找，如果在父scope上也沒找到，就會繼續向上回溯，一直到$rootScope 上。

唯一的例外：有些指令屬性可以選擇性地創建一個獨立的scope，讓這個scope不繼承它的父scope們。

舉個例子，假設我們有一個ParentController ，含有一個person 對象，又有一個ChildController 想要訪問這個對象：

當我們在view里把ChildController 綁定到ParentController 之下，在子元素里我們就能訪問ParentController 創建的父scope的屬性，像訪問ChildController 自己的scope中的屬性一樣：

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