歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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

希望你喜歡,並分享我的工作~帶你走近AngularJS系列

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的詳細介紹:請點這裡
AngularJS 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved