angular中的scope

世有因果知因求果發表於2015-09-05
Angular

　　angular.element($0).scope()

什麼是scope?

scope是一個refer to the application model的object。它是一個expression的執行上下文context。scopes模仿DOM的層次模型也有層次關係。Scopes可以watch一個expression也可以propagate events。

scope特性

scope提供API $watch來觀察模型的變化

scope提供API $apply來傳播angular外部世界(比如controller,service,event handler)造成的模型變更到系統中的各個view.

scopes可以巢狀，巢狀的scope要麼是child scope或者isolated scope.一個child scope將從parent scope中繼承屬性，而isolated scope則不會。

scope提供了一個表示式執行的context。比如{{username}}這個表示式，除非給定一個定義了username屬性的scope，否則是沒有意義的。

scope作為data-model

scope是應用程式的controller和view之間的介面。在template linking階段，directives建立起$watch expressions on the scope. $watch允許directives被通知到任何屬性的變更，這樣就允許一個directive來渲染變更過的資料到DOM上。

controller和directive都會引用到scope，但又不完全雷同。這個安排的好處是將controller從directive或者從DOM處隔離開來。這將使得controller和view無關，而這將大大增強應用的可測試性。

<div ng-controller="MyController">
  Your name:
    <input type="text" ng-model="username">
    <button ng-click='sayHello()'>greet</button>
  <hr>
  {{greeting}}
</div>
angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
  $scope.username = 'World';

  $scope.sayHello = function() {
    $scope.greeting = 'Hello ' + $scope.username + '!';
  };
}]);

在上面的例子中，MyController給scope物件的username屬性賦值為World。然後scope物件將通知和username繫結的input元素，它會將username的值渲染出來。這演示了controller如何能夠向scope物件寫一個屬性。

類似的，controller可以向scope來賦值一個sayHello方法，這個方法將在使用者點選greet button時被呼叫。sayHello方法然後讀取username屬性並且建立一個greeting屬性。這又演示了scope的屬性當他們被繫結給input widgets時將隨著使用者的輸入自動更新

邏輯上說：{{greeting}}的渲染包含：

獲取template中{{greeting}}的定義所在的DOM節點相關聯的scope物件。在這個例子中，這個scope是和傳遞給MyController相同的scope;

在上面獲取到的scope上下文中，Evaluate {{greeting}}表示式，並且將其值賦值給enclosing DOM element的text節點

你可以把scope和它的屬性想象成用於渲染檢視的資料。scope是所有檢視相關的唯一資料來源。

另外，從測試的角度說，控制器和檢視分離是有必要的，因為它允許我們在不用關心渲染細節的基礎上做好測試。

scope層次關係

每一個angular的應用程式只有一個root scope，但是可能有多個子scope

應用程式可以有多個scope,因為一些directive會建立新的子scope。當新的scope被建立時，他們被新增為它的父scope的子孫。這樣就建立了一個和他們所相關的DOM平行的樹型結構

當angular evaluate {{name}}時，它首先檢視和相關html元素相關聯的元素是否有name屬性。如果沒有發現Name屬性，它則查詢parent scope直到root scope.在javascript中，這個行為被稱為prototypical inheriteance，而子scope prototypically inherit from their parents.

https://docs.angularjs.org/guide/scope

 

相關文章