AngularJS学习笔记

6.1. 数据->模板

数据到表现的绑定,主要是使用模板标记直接完成的:

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

使用 {{ }} 这个标记,就可以直接引用,并绑定一个作用域内的变量。在实现上, ng 自动创建了一个 watcher 。效果就是,不管因为什么,如果作用域的变量发生了改变,我们随时可以让相应的页面表现也随之改变。我们可以看一个更纯粹的例子:

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

  <script type="text/javascript">
  var TestCtrl = function($scope){
    $scope.a = '123';
  }
  angular.bootstrap(document.documentElement);

上面的例子在页面载入之后,我们可以在页面上看到 123 。这时,我们可以打开一个终端控制器,输入:

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

上面的代码执行之后,就可以看到页面变化了。

对于使用 ng 进行的事件绑定,在处理函数中就不需要去关心 $digest() 的调用了。因为 ng 会自己处理。源码中,对于 ng 的事件绑定,真正的处理函数不是指定名字的函数,而是经过 $apply() 包装过的一个函数。这个 $apply() 做的一件事,就是调用根作用域 $rootScope$digest() ,这样整个世界就清净了:

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

  <script type="text/javascript" charset="utf-8">
  var TestCtrl = function($scope){
    $scope.a = '123';

    $scope.click = function(){
      $scope.a = '456';
    }
  }
  angular.bootstrap(document.documentElement);

那个 click 函数的定义,绑定时变成了类似于:

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

这里的 $scope.$apply() 中做的一件事:

  $rootScope.$digest();