AngularJS 數(shù)據(jù)到模板的綁定

數(shù)據(jù)到表現(xiàn)的綁定，主要是使用模板標記直接完成的：

<p>{{ w }} x {{ h }}</p>

使用 {{ }} 這個標記，就可以直接引用，并綁定一個作用域內(nèi)的變量。在實現(xiàn)上， ng 自動創(chuàng)建了一個 watcher 。效果就是，不管因為什么，如果作用域的變量發(fā)生了改變，我們隨時可以讓相應的頁面表現(xiàn)也隨之改變。我們可以看一個更純粹的例子：

<p id="test" ng-controller="TestCtrl">{{ a }}</p>

<script type="text/javascript">
angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
    $scope.a = '123';
});
angular.bootstrap(document.documentElement, ['app']);
</script>

上面的例子在頁面載入之后，我們可以在頁面上看到 123 。這時，我們可以打開一個終端控制器，輸入：

$('#test').scope().a = '12345';
$('#test').scope().$digest();

上面的代碼執(zhí)行之后，就可以看到頁面變化了。

對于使用 ng 進行的事件綁定，在處理函數(shù)中就不需要去關(guān)心 $digest() 的調(diào)用了。因為 ng 會自己處理。源碼中，對于 ng 的事件綁定，真正的處理函數(shù)不是指定名字的函數(shù)，而是經(jīng)過 $apply() 包裝過的一個函數(shù)。這個 $apply() 做的一件事，就是調(diào)用根作用域 $rootScope 的 $digest() ，這樣整個世界就清凈了：

<p id="test" ng-controller="TestCtrl" ng-click="click()">{{ a }}</p>

<script type="text/javascript">
angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
    $scope.a = '123';
    $scope.click = function(){
      $scope.a = '456';
    }
});
angular.bootstrap(document.documentElement, ['app']);
</script>

那個 click 函數(shù)的定義，綁定時變成了類似于：

function(){
  $scope.$apply(
    function(){
      $scope.click();
    }
  )
}

這里的 $scope.$apply() 中做的一件事：

$rootScope.$digest();