repeater避免绑定html标签_AngularJS学习--双向数据绑定及相关指令

1 概念介绍

1.1 双向数据绑定

数据绑定是AngularJS框架最优秀的特性之一，可以帮助前端开发人员在很大程度上减少对DOM的操作，是一种在视图(DOM元素)与作用域之间建立的数据同步机制。双向数据绑定，即指在界面的操作可以实时同步到作用域中，而作用域中数据的变化也能够实时回显到界面中。这里提到的“作用域”，可以理解为一个存有key-value数据的容器。

1.2 AngularJS指令

指令是扩展的HTML属性或标签，被AngularJS框架识别后，可以执行相应的动作，比如想启动AngularJ框架，就需要在HTML元素中添加np-app这个指令，这样文件中的内容才能够被AngularJS框架识别，进而启动AngularJS框架。

本次学习双向数据绑定，会学习到以下指令，分别是ng-init、ng-model、ng-bind，通过指令名称可以发现，指令都是以“ng-”开头的。

2 指令学习

2.1 ng-init指令

该指令用于初始化作用域，在以下的代码中，通过init-ng指令向作用域中增加了一个student对象以及一个hobby数组，最后通过表达式输出。

 练习示例

学生姓名：{{student.name}}

爱好：{{hobby[0]}}、{{hobby[1]}}

ng-init指令

写上段代码时，将hobby数组的[]写成了{}，导致界面没有显示任何内容，基本功也要好好学习啊~~~

2.2 ng-model指令

学生姓名：

{{stu_name}}

代码中ng-model的作用，就是建立数据模型，在作用域中有一个变量stu_name用来存放input元素的值，当在input中输入内容时，AngularJS会自动将input中的内容同步到作用域中的stu_name属性中，相应的，如果作用域中的stu_name属性发生了变化，页面中input内容也会实时更新。

2.3 ng-bind指令

ng-bind指令的作用是实现作用域到视图的单向数据绑定，类似于表达式的功能，用于向界面输出作用域中的数据。下面代码的执行效果与2.2一样，当在输入框录入学生姓名时，会在下面实时显示输入框中的内容。

学生姓名：

3 数据绑定效果

绑定效果

4 数据绑定的原理

最后记录一下数据绑定的原理吧，当使用ng-model或ng-bind指令将数据模型中的某个变量值和html页面上某个标签的内容联系起来时，Angular就会把这些变量放进一个WatchCollection的集合中，并自动帮我们来监控这些变量。每当WatchCollection中有变量出现变动时，Angular就会遍历WatchCollection来查看是否有其他监控中的变量也被影响，每当有一个变量被影响，Angular都会在遍历后再进行一次遍历，直到某一次遍历后WatchCollection中的变量都没有变化，则Angular会认为当前的改动已经稳定了，然后才会将数据模型的变化同步到DOM元素上去，也就实现了数据绑定。