(1) 功能描述
在页面中，先添加一个用于文本输入的<input>元素，并通过Angular指令绑定一个表达式，然后，再添加一个<div>元素，通过Angular中的双花括号插入相同的表达式，当文本输入框中的内容变化时，<div>元素插入的内容也随之发生变化。
(2) 实现代码
新建一个HTML文件1-3.html，加入如代码清单1-3所示的代码。
代码清单1-3一个绑定页面元素的Angular程序
<!doctype html>
<html ng-app>
<head>
<title>一个绑定页面元素的angular程序</title>
<script src="../Script/angular.min.js"
type="text/javascript"></script>
</head>
<body>
<h3>请在下列文本框中输入任意内容</h3>
<div ng-controller="usercontroller">
<input id="Text1" type="text" ng-model="user.name" />
<div>{{user.name}}</div>
</div>
<script type="text/javascript">
function usercontroller($scope) {
$scope.user = { name: "" };
}
</script>
</body>
</html>
(3) 页面效果
HTML文件1-3.html最终实现的页面效果如下图1-4所示。
图1-4一个绑定页面元素的Angular程序
(4) 源码分析
在本示例的源代码中，在<html>元素中添加了“ng-app”属性，表明Angular可以管理整个页面。此外，向<div>元素添加了一个名为“ng-controller”的属性，该属性是Angular的另外一个指令，用来声明Angular中控制器类的名称，并且这个被声明的类将管理<div>中的全部元素。
接下来，再向文本框元素添加一个“ng-model”属性，绑定逻辑层中的user.name数据，并同时通过双花括号向页面中的另外一个<div>元素插入相同的user.name内容。在Angular中，使用“ng-model”方式绑定数据是双向变化的，即如果数据源发生了变化，被绑定的元素中的内容也将会自动进行同步变化，反之，数据源也会随被绑定的元素值的变化而变化。
因此，当用户在文本框中输入任意内容时，改变了绑定的数据源，而其他插入的相同数据源也将随之进行同步，页面插入的user.name内容也将跟随变化，而实现这一切，都无需注册任何文本框的change事件去监听，就可以让页面中的元素绑定的数据自动刷新。
这一特征也同样适用于服务器端的更新，即当我们向服务器请求一个数据时获取了最新的user.name值，而在页面中绑定的输入框内容和插入显示的数据也将会同时自动更新为最新值。
除此之后，Angular还可以通过数据绑定的方式，将重复格式的多项数据内容显示在页面各个元素中，接下来我们再通过一个简单的示例来进行说明。
网友评论