- AngularJS入门与进阶
- 江荣波
- 921字
- 2020-11-28 23:44:29
2.2 ng-model指令
为了建立数据绑定，我们需要用到AngularJS另外一个内置指令ng-model，该指令只能用在表单元素上，使用方法如下：
<input type="text" name="uname" ng-model="uname" />
在input输入框上添加ng-model指令后，AngularJS框架就会在对应的作用域中创建一个uname属性和该输入框进行绑定。
数据绑定是AngularJS最优秀的特性之一，下面以一个案例来说明AngularJS数据绑定机制的好处。假如我们要完成这样一个功能，即把用户在表单中输入的信息动态回显到页面中。
如果使用原生的JavaScript，可以通过document对象的getElementById()方法获取输入框对象，响应输入框的keyup事件，在输入框的keyup事件响应方法中获取输入框内容，然后同样以操作DOM的方式把输入框内容显示到页面中，具体代码如下：
代码清单：ch02\ch02_01.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ch02_01</title>
</head>
<body >
<div>用户名：<input type="text" name="uname" id="uname" /></div>
<div><span id="info"></span></div>
<script type="text/javascript">
var uname = document.getElementById（"uname"）;
var info = document.getElementById（"info"）;
uname.onkeyup = function(){
info.innerHTML = uname.value;
}
</script>
</body>
</html>
上面的代码非常简单，相信读者都能看懂，接下来在浏览器中运行ch02_01.html页面，效果如图2.2所示。
图2.2 动态回显用户输入示例
可以看到界面上显示的内容随着输入的改变而动态改变。本例中我们编写了数行JavaScript代码，为了突出AngularJS数据绑定机制的优势，我们再使用AngularJS数据绑定机制来完成这个案例，具体代码如下：
代码清单：ch02\ch02_02.html
<!doctype html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>ch02_02</title>
<script type="text/javascript" src="../angular-1.5.5/angular.js">
</script>
</head>
<body >
<div>用户名：<input type="text" ng-model="uname" /></div>
<div>{{uname}}</div>
</body>
</html>
在浏览器中运行ch02_02.html页面，就会发现运行效果和上一个案例完全相同，但是本案例中的核心代码仅仅只有下面两行：
<div>用户名：<input type="text" ng-model="uname" /></div>
<div>{{uname}}</div>
如上面的代码所示，我们甚至连一行JavaScript代码都没有编写就完成了这个功能，到底是怎样做到的呢？下面对该应用进行剖析：
上面案例中的ng-app指令用于启动AngularJS应用。需要注意的一点是，当AngularJS遇到ng-app指令时就会创建一个名为$rootSocpe的作用域，该作用域为AngularJS应用的根作用域。
作用域其实是一个简单的JavaScript对象，形式如下：
var $rootScope={uname:”江荣波"};
我们把ng-model指令作为属性添加到input标签中，此时AngularJS会在$rootSocpe作用域中添加一个uname属性和input输入框绑定，当我们在input表单中输入内容时，AngularJS会自动把输入的内容同步到作用域的uname属性中，因此我们不需要自己响应input标签的keyup事件去处理。
{{uname}}为AngularJS的表达式形式，可以访问AngularJS作用域里的属性，这里我们使用表达式把uname属性输出到页面中。同时AngularJS还能够监视作用域中数据的变化，当数据发生变化时，页面显示内容也能够得到实时更新。
注意
在上面的例子中，我们向$rootScope作用域中添加属性进行了数据绑定，会造成全局作用域污染，实际项目中并不会这么做，而是把表单和控制器作用域中的属性进行数据绑定。控制器作用域是根作用域$rootScope的子作用域，后面会接触到。