首页 > 代码库 > AngularJs入门篇-控制器的加深理解基础篇

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,那么我会单独的找点资料,为解释它的用法。目前只需要不添加它,是实现不了的就可以了。

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