Page 29 - AngularJS权威教程
P. 29
2.3 数据绑定的最佳实践 9
如果把这个最佳实践应用到上面时钟的例子中,需要把视图中的代码改写成下面这样: 1
<!doctype html>
<html ng-app>
<head> 2
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head>
<body> 3
<div ng-controller="MyController">
<h1>Hello {{ clock.now }}!</h1>
</div>
<script type="text/javascript" src="js/app.js"></script> 4
</body>
</html>
5
在这个例子中,相比每秒钟都更新$scope.clock,更新clock.now的值会是更好的选择。有
了这个优化后,我们将反映数据变化的逻辑做如下修改:
6
// 在app.js中
function MyController($scope) {
$scope.clock = { 7
now: new Date()
};
var updateClock = function() {
$scope.clock.now = new Date() 8
};
setInterval(function() {
$scope.$apply(updateClock); 9
}, 1000);
updateClock();
};
10
将所有绑定都通过这样的形式放在视图中,是个非常好的主意。
11
12
13
14
15
16
17
18