现在我想在页面上显示一个变量i,i的初始值是0,我希望通过controller每1秒给i加1,使得在页面上i从0,1,2,3,4……一直增长,我会这么做:

<script type="text/javascript">
    /**
     * Module
     *
     * Description
     */
    angular.module('app', []).controller('firstController',
        function($scope) {
            $scope.i = 0;
            setInterval(function() {
                $scope.i++;
            }, 1000);
        });
</script>

    然而这样是没用的,因为i虽然变了,但是没人通知view,页面上的i还是0,不会增长。需要用到apply方法:

<script type="text/javascript">
    /**
     * Module
     *
     * Description
     */
    angular.module('app', []).controller('firstController',
        function($scope) {
            $scope.i = 0;
            setInterval(function() {
                $scope.$apply(function() {
                    $scope.i++;
                });
            }, 1000);
        });
</script>

       Angular知道变量改变是通过脏检查实现的,脏检查就是将原对象复制一份快照,在某个时间,比较现在对象和快照的值,如果不一样就是发生了变化。Angular不会脏检查所有对象,当对象被绑定到html中,这个对象才被添加为检查对象。也不会检查所有属性,当属性被绑定时,才会列为检查的属性。

       所有ng开头的事件执行时,都会触发脏检查。而这里自己写的firstController中每次循环执行函数结束后,显然没有触发脏检查。$apply方法就是手动触发脏检查,$apply仅仅是进入angular context,然后通过$digest去触发脏检查。$digest方法负责所属的scope和子scope的脏检查,脏检查又会触发$watch方法。

      $apply()的定义为:

$apply: function(expr) {
        try {
          beginPhase('$apply');
          return this.$eval(expr);
        } catch (e) {
          $exceptionHandler(e);
        } finally {
          clearPhase();
          try {
            $rootScope.$digest();
          } catch (e) {
            $exceptionHandler(e);
            throw e;
          }
        }
      }

   在$digest执行时,如果watch观察到的value和上次的不一样,就会触发$watch方法。

      $watch(watchExp,watchAction,deepWatch)

      watchExp指明要监听的对象,如果watchExp变了,就会执行watchAction,deepWatch得举个例子解释。

<!DOCTYPE html>
<html ng-app="app">

<head>
    <meta charset="utf-8">
</head>

<body>
    <div ng-controller="firstController">
        <p ng-bind="i"></p>
        <input type="text" ng-model="abc['name']">
        <input type="text" ng-model="abc['age']">
    </div>
    <script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"></script>
    <script type="text/javascript">
    angular.module('app', []).controller('firstController',
        function($scope) {
            $scope.i = 0;
            $scope.abc={
            	'name':'Pomelo',
            	'age':21
            }
            $scope.$watch('abc',function(newValue,oldValue){
            	$scope.i++;
            },true);
        });
    </script>
</body>

</html>

  在watchExp是个数组时,deepWatch设置为true,只要这里abc中的name或者age变了,都算数组abc变化,如果deepWatch设置为false,改变name或者age,abc都没有变,不会执行watchAcion。上面这段代码是只要name或者age改变,i就自增1。