AngularJS 深入理解 $scope

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

 

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

AngularJS <wbr>深入理解 <wbr>$scope

$rootScope

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

$scope 的作用

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

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

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

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

3.可以進行嵌套,隔離業務功能和數據

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

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

$scope 生命週期

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

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

1. 創建

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

2. 鏈接

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

3. 更新

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

4. 銷燬

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章