Page 27 - AngularJS权威教程
P. 27
2.2 简单的数据绑定 7
<input ng-model="person.name" type="text" placeholder="Yourname"> 1
<h1>Hello{{ person.name }}</h1>
这样绑定就设置好了（没错，就是这么简单）。我们可以观察一下视图是如何更新数据模型
的。当输入字段中的值发生变化时，person.name会被更新，而视图将反映出这个更新。 2
我们仅通过视图就实现了一个双向数据绑定。为了从其他角度（后端到前端）解释双向数据
绑定，后面会深入介绍控制器。 3
正如 ng-app 声明所 有被 它包含 的元 素都属 于 AngularJS 应用 一样， DOM 元素上 的
ng-controller声明所有被它包含的元素都属于某个控制器。 4
为了解释这个概念，我们将前面的例子修改成如下的样子：
5
<div ng-controller='MyController'>
<input ng-model="person.name" type="text" placeholder="Your name">
<h1>Hello {{ person.name }}</h1> 6
</div>
在这个例子中，我们会创建一个每秒钟走一步的时钟（时钟通常都是这样的），并更新clock
变量上的数据： 7
function MyController($scope, $timeout) {
var updateClock = function() { 8
$scope.clock = new Date();
$timeout(function() {
updateClock(); 9
}, 1000);
};
updateClock();
}; 10
在这个例子中，MyController函数接受两个参数，即该DOM元素的$scope和 11
$timeout。第13章将介绍如何使用不同的变量定义函数。
在这个例子中，当定时器触发时会调用updateClock()函数，将$scope.clock的值设置为当 12
前时间。
$timeout对象 13
可以在视图中将clock变量用{{ }}包起来，以显示$scope中的clock的值：
14
<div ng-controller="MyController">
<h5>{{ clock }}</h5>
</div>
15
下面是完整的示例代码：
<!doctype html> 16
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script> 17
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{ clock }}!</h1> 18
