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

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

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

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

<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>

上面的例子在頁(yè)面載入之后，我們可以在頁(yè)面上看到 123 。這時(shí)，我們可以打開(kāi)一個(gè)終端控制器，輸入：

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

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

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

<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>

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

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

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

$rootScope.$digest();