AngularJS 作用域

這里提到的“作用域”的概念，是一個(gè)在范圍上與 DOM 結(jié)構(gòu)一致，數(shù)據(jù)上相對(duì)于某個(gè) $scope對(duì)象的屬性的概念。我們還是從 HTML 代碼上來(lái)入手：

<div ng-controller="BoxCtrl">
  <div style="width: 100px; height: 100px; background-color: red;"
       ng-click="click()">
  </div>
  <p>{{ w }} x {{ h }}</p>
  <p>W: <input type="text" ng-model="w" /></p>
  <p>H: <input type="text" ng-model="h" /></p>
</div>

上面的代碼中，我們給一個(gè) div 元素指定了一個(gè) BoxCtrl ，那么， div 元素之內(nèi)，就是 BoxCtrl 這個(gè)函數(shù)運(yùn)行時(shí)， $scope 這個(gè)注入資源的控制范圍。在代碼中我們看到的 click() ， w ， h 這些東西，它們本來(lái)的位置對(duì)應(yīng)于 $scope.click ， $scope.w ， $scope.h 。

我們?cè)诤竺娴?js 代碼中，也可以看到我們就是在操作這些變量。依賴于 ng 的數(shù)據(jù)綁定機(jī)制，操作變量的結(jié)果直接在頁(yè)面上表現(xiàn)出來(lái)了。