1. 程式人生 > >AngularJS的作用域Scope

AngularJS的作用域Scope

環境 嵌套 不同 ng-repeat size 理解 microsoft ack target

1.簡介

angularjs啟動並生成視圖時,會根據ng-app元素和$RootScope進行綁定。$RootScope是所有$scope對象的最上層,是angularjs中最接近於全局作用域的對象。

$scope對象就是一個普通的javascript對象,在angularjs中充當數據模型,但與傳統的數據模型又不一樣,$scope並不負責處理和數據操作,它只是視圖和HTML之間的橋梁。

$scope的所有屬性都可以自動被視圖訪問到。

作用域是構成AngularJS應用的核心,它與應用的數據模型相關聯,同時也是表達式執行的上下文。作用域包含了渲染視圖所需的功能和數據,它是所有視圖的唯一源頭,可以將作用域理解成視圖模型。

  $scope對象是定義應用業務邏輯、控制器方法和視圖屬性的地方。angularjs將$scope設計成和DOM類似的結構,因此$scope可以進行嵌套,也就是說我們可以引用父級$scope中引用父級$scope中的屬性和方法。

2.作用域功能

  • 提供觀察者以監視數據模型的變化。
  • 可以將數據模型的變化通知給整個應用,設置是系統外的組件。
  • 可以進行嵌套,隔離業務功能和數據。
  • 給表達式提供運算時所需的執行環境。

3.會創建子作用域的指令

  AngularJS中大部分指令不會創建子作用域,但是以下指令例外,開發時必須註意作用域嵌套的相關問題,否則很容易出錯。

  • ng-include
    創建一個新的子作用域,並且會繼承父作用域。
  • ng-switch
    創建一個新的子作用域,並且會繼承父作用域。
  • ng-repeat
    為每一個item都創建一個子作用域,全部都會繼承父作用域。
  • ng-controller
    創建一個新的作用域,並且會繼承父作用域

4.$scope生命周期

  $scope對象的生命周期處理有四個不同階段,分別是創建,鏈接,更新和銷毀。  

創建

  在創建控制器或指令時,AngularJS會用$injector創建一個新的作用域,並在這個新建的控制器或指令運行時將作用域傳遞進去。

鏈接

  當Angular開始運行時,所有的$scope對象都會附加或者鏈接到視圖中。所有創建$scope對象的函數也會將自身附加到視圖中。這些作用域將會註冊當Angular應用上下文中發生變化時所需要運行的函數。這些函數被稱為$watch函數,Angular通過這些函數獲知何時啟動時間循環。

更新

  當事件循環運行時,它通常執行在$rootScope上。每個子作用域都執行自己的臟值檢測,每個監控函數都會檢查變化。如果檢測到任意變化,$scope對象就會觸發指定的回調函數。

銷毀

  當一個$scope在視圖中不再需要時,這個作用域將會清理和銷毀自己。(基本上不會需要你來清理作用域,但是你還是可以使用$scope上的$destroy()方法來清理作用域)。

AngularJS的作用域Scope