下面做的是一个更新时间的效果,每一秒钟就会更新一下,视图中会显示出当前的时间
下面的这个例子中,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,那么我会单独的找点资料,为解释它的用法。目前只需要不添加它,是实现不了的就可以了。