1. 程式人生 > 實用技巧 >Angular 中得 scope 作用域梳理

Angular 中得 scope 作用域梳理

2019獨角獸企業重金招聘Python工程師標準>>> hot3.png

$scope 的使用貫穿整個 Angular App 應用,它與資料模型相關聯,同時也是表示式執行的上下文.有了 $scope 就在檢視和控制器之間建立了一個通道,基於作用域檢視在修改資料時會立刻更新 $scope,同樣的 $scope 發生改變時也會立刻重新渲染檢視.

有了 $scope 這樣一個橋樑,應用的業務程式碼可以都在 controller 中,而資料都存放在controller 的 $scope 中.

131511_xRu4_723632.png

$rootScope

Angular 應用啟動並生成檢視時,會將根 ng-app 元素與 $rootScope 進行繫結.$rootScope 是所有 $scope 的最上層物件,可以理解為一個 Angular 應用中得全域性作用域物件,所以為它附加太多邏輯或者變數並不是一個好主意,和汙染 Javascript 全域性作用域是一樣的.

$scope 的作用

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

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

  1. 提供了觀察者可以監聽資料模型的變化

  2. 可以將資料模型的變化通知給整個 App

  3. 可以進行巢狀,隔離業務功能和資料

  4. 給表示式提供上下文執行環境

在 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() 函式手動清理.


轉載於:https://my.oschina.net/blogshi/blog/316745