当AngularJS认为某个值可能发生变化时,它会运行自己的事件循环来检查这个值是否变“脏”。如果该值从上次事件循环运行之后发生了变化,则该值被认为是“脏”值。这也是Angular可以跟踪和响应应用变化的方式。
这个过程被称作脏检查(dirty checking)。脏检查是检查数据模型变化的有效手段。当有潜在的变化存在时,AngularJS会在事件循环时执行脏检查来保证数据的一致性。
审阅一下上一篇写的代码,用到了ng-model指令将内部数据模型对象'($scope)'中的name属性绑定到了文本输入字段上。
这意味着无论在文本输入字段中输入了什么,都会同步到数据模型中。
数据模型对象(model object)是指$scope对象。
$scope对象是一个简单的JavaScript对象,其中的属性可以被视图访问,也可以同控制器进行交互。如果
不理解这个概念也没有关系,后面的例子将会对这个概念进行详细说明。
双向数据绑定(bi-directional)意味着如果视图改变了某个值,数据模型会通过
脏检查观察到这个变化,而如果数据模型改变了某个值,视图也会依据变化重新渲染。
HTML
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="lib/angular.min.js"></script>
<script src="lib/clock.js"></script>
</head>
<body>
<div ng-controller="ClockController">
<h1>hello{{ clock }}!</h1>
</div>
</body>
</html>
JS
var clock = angular.module('myApp', []);
clock.controller('ClockController', function($scope, $timeout) {
var updateClock = function() {
$scope.clock = new Date();
$timeout(function() {
updateClock();
}, 1000);
};
updateClock();
});
如果吧这个最佳实践应用到上面的时钟的例子中,需要把视图中的代码改成下面的这样:
HTML
<div ng-controller="ClockController">
<h1>hello{{ clock.now }}!</h1>
</div>
JS
var clock = angular.module('myApp', []);
clock.controller('ClockController', function($scope, $timeout) {
$scope.clock = {
now: new Date()
};
var updateClock = function() {
$scope.clock.now = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
});