AngularJs入门篇-控制器的加深理解基础篇

下面做的是一个更新时间的效果，每一秒钟就会更新一下，视图中会显示出当前的时间

 

下面的这个例子中，SceondController函数将接受两个参数，既该DOM元素的$scope和$timeout。

可以将视图中clock变量用{{}}包起来，以显示$scope中的clock的值。

///////////////  THML

<div ng-controller="SceondController">

  <h5>{{ clock }}</h5>

</div>

///////////////  SCRIPT

<script type="text/javascript">

  angular.module("myApp", []) 

    .controller("SceondController", function($scope, $timeout) {

      var updataClock = function() {

        $scope.clock = new Date();

        $timeout(function() {

          updataClock();

        }, 1000);

      };

      updataClock();

    });

</script>

 

//数据绑定的最佳实践

由于JavaScript自身的特点，以及它在传值和引用时的不同处理方式，通常认为，在视图中通过对象的属性

而非对象本身来进行引用绑定，是AngularJS的最佳实践。

那么如果把这个最佳实践应用到上面的那个时钟效果上，那么需要把视图中的代码写成如下这个样子：

angular.module("myApp", [])

    .controller("SceondController", function($scope) {

      $scope.clock = {

        now: new Date()

      };

      var updataClock = function() {

        $scope.clock.now = new Date();

      };

      setInterval(function() {

        $scope.$apply(updataClock);

      }, 1000);

      updataClock();

    });

*或许这个时候不知道什么时候用$apply，那么我会单独的找点资料，为解释它的用法。目前只需要不添加它，是实现不了的就可以了。