这次给大家带来如何使用Angular数据绑定机制，如何使用Angular数据绑定机制的注意事项有哪些，下面就是实战案例，一起来看一下。
1.Angular.js扩展浏览器的事件循环
浏览器持续等待例如用户交互这样的事件。当你在一个标签里输入字符之后，这个事件的回调函数在JS解释器中执行了其包含的DOM操作，执行完毕后，浏览器响应地对DOM做出了变化。Angular拓展了这个事件循环，使它有时候成为angular context 的执行环境。
2.$watch list
$watch 可以检测model的变化。每当绑定一个数据到view上的时候，$watch队列就会插入一条对应的$watch。例子如下：
controller.js：
app.controller('MainCtrl', function($scope) {
$scope.people = [...]; // 假设长度为10
});index.html:
- {{person.name}} - {{person.age}}
其中ng-repeat 生成了一个1个$watch，每个person生成了2个$watch，总共是（1+2*10），21个$watch。$watch的生成阶段是模板加载完成，也就是linking阶段。（angular分为compile和linking阶段），Angular会寻找每个directive（上面的例子中ng-repeat和{{}}都属于directive），然后生成每个$watch。
3.$digest 循环
当浏览器接收到angular context相关的事件时，$digest循环就会被触发。它由2个小循环组成，1个处理evalAsync 队列，另一个处理$watch队列。$digest进行循环时，将遍历$watch队列，查看是否有数据更新过，这种遍历就叫做dirty-checkin（脏检查），如果脏检查发现有$watch更新，将会触发新的脏检查，直到所有的$watch都没有更新。这样就能保证每个model都不会变化。
脏检查超过10次后会抛出异常防止无限循环。$digest循环结束后DOM会相应地发生变化。其实$digest从字面意义理解就像“消化”的过程一样，逐渐地把所有营养（$watch的变化）都吸收掉。
4.通过$apply 进入 angular context
$apply 决定事件是否进入angular context，使用angualr的自带directive，比如ng-model，更改绑定的数据时，angular会将事件封装到$apply中。比如，ng-model="name"的输入框，输入字符“w”，事件会调用，$apply("name='w';")，完成$scope中的数据更新。
调用第三方库时的数据绑定
当在angular中调用jquery，并不能更新jquery绑定的数据，因为jquery没有调用$apply，事件没有进入angular context，导致$digest没有执行。例子如下：
app.js
app.directive('clickable', function() {
return {
restrict: "E",
scope: {
count1: '=',
count2: '='
},
template: '- {{count1}}
- {{count2}}
例子中，每次点击该元素，预期count1和count2都会自增1，但实际没有。其实$scope（ViewModel）已经改变，但是没有强制执行$digest。修改click事件如下：
element.bind('click', function() {
scope.$apply(function() {
scope.foo++;
scope.bar++;
});
})经过调用$apply实现了预期。
5.总结
angular事件绑定机制如下图：
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
专为中小型企业定制的网络办公软件,富有竞争力的十大特性： 1、独创 web服务器、数据库和应用程序全部自动傻瓜安装，建立企业信息中枢 只需3分钟。 2、客户机无需安装专用软件，使用浏览器即可实现全球办公。 3、集成Internet邮件管理组件，提供web方式的远程邮件服务。 4、集成语音会议组件，节省长途话费开支。 5、集成手机短信组件，重要信息可直接发送到员工手机。 6、集成网络硬
