AngularJS 深刻理解 $scope

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

 

有了 $scope 這樣一個橋樑,應用的業務代碼能夠都在 controller 中,而數據都存放在controller 的 $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() 函數手動清理.