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