本篇文章主要介绍了浅谈angularjs 双向绑定原理(数据绑定机制)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
那么什么是双向绑定，下面简单进行讲解。
首先我们要理解数据绑定。我们看到的网站页面中，是由数据和设计两部分组合而成。将设计转换成浏览器能理解的语言，便是html和css主要做的工作。而将数据显示在页面上，并且有一定的交互效果（比如点击等用户操作及对应的页面反应）则是js主要完成的工作。很多时候我们不可能每次更新数据便刷新页面（get请求），而是通过向后端请求相关数据，并通过无刷新加载的方式进行更新页面（post请求）。那么数据进行更新后，页面上相应的位置也能自动做出对应的修改，便是数据绑定。
在以前的开发模式中，这一步一般通过jq操作DOM结构，从而进行更新页面。但这样带来的是大量的代码和大量的操作。如果能在开始的时候，便已经确定好从后端获取的数据到页面上需要进行的操作，当数据发生改变，页面的相关内容也自动发生变化，这样便能极大地方便前端工程师的开发。在新的框架中（angualr，react，vue等）,通过对数据的监视，发现变化便根据已经写好的规则进行修改页面，便实现了数据绑定。可以看出，数据绑定是M(model，数据）通过VM（model-view，数据与页面之间的变换规则）向V（view）的一个修改。
而双向绑定则是增加了一条反向的路。在用户操作页面（比如在Input中输入值）的时候，数据能及时发生变化，并且根据数据的变化，页面的另一处也做出对应的修改。有一个常见的例子就是淘宝中的购物车，在商品数量发生变化的时候，商品价格也能及时变化。这样便实现了V——M——VM——V的一个双向绑定。
AngularJs 为 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view(html) 上时 AngularJs 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发。$digest 会遍历所有的 $watch。从而更新DOM。
$watch
这有点类似于我们的观察者模式，在当前作用域$scope下，我们创建一个监控器$watchers和一个监听器$watch，$watchers 负责管理所有的 $watch，当我们每次绑定到UI上的时候就自动创建一个$watch，并把它放到 $watchers。
controller.js
app.controller('MainCtrl', function($scope) { $scope.Hello = "Hello"; $scope.world = "World";});
登录后复制
index.html
{{Hello}}
登录后复制
这里，即便我们在$scope上添加了两个变量，但是只有一个绑定在了UI上，因此在这里只生成了一个$watch
$digest
当浏览器接收到可以被angular context处理的事件时，$digest循环就会触发。$digest将会遍历我们的$watch，如果$watch没有变化，这个循环检测就将停止，如果有至少一个更新过，这个循环就会再次触发，直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。这就是脏检查(Dirty Checking)机制
controller.js
app.controller('MainCtrl', function() { $scope.name = "Foo"; $scope.changeFoo = function() { $scope.name = "Bar"; }});
登录后复制
index.js
{{ name }}
登录后复制
当我们按下按钮
浏览器接收到一个事件，进入angular context。
$digest循环开始执行，查询每个$watch是否变化。
由于监视$scope.name的$watch报告了变化，它会强制再执行一次$digest循环。
新的$digest循环没有检测到变化。
更新与$scope.name新值相应部分的DOM。
$apply
$apply 我们可以直接理解为刷新UI。如果当事件触发时，你调用$apply，它会进入angular context，如果没有调用就不会进入，之后的$digest检测机制就不会触发
app.directive('clickable', function() { return { restrict: "E", scope: { foo: '=' }, template: '
登录后复制{{foo}}’, link: function(scope, element, attrs) { element.bind(‘click’, function() { scope.foo++; console.log(scope.foo); }); } }});
当我们调用clickable指令的时候，我们可以看到foo的值增加了，但是界面上显示的内容并没有改变。$digest脏检测机制没有触发，检测foo的$watch就没有执行。
$apply()方法的两种形式
1) 无参
$scope.$apply();
登录后复制
element.bind('click', function() { scope.foo++; //if error scope.$apply();});
登录后复制
当我们使用这种形式的时候，如果在scope.$apply之前程序发生异常，那scope.$apply没有执行，界面就不会更新
2) 有参
$scope.$apply(function(){ ...})
登录后复制
element.bind('click', function() { scope.$apply(function() { scope.foo++; });})
登录后复制
如果用这种形式，即使后面的发生异常，数据还是会更新。
在 AngularJS 中使用 $watch
常用的使用方式：
$scope.name = 'Hello';$scope.$watch('name', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++;});
登录后复制
传入到$watch()中的第二个参数是一个回调函数，该函数在name的值发生变化的时候会被调用。
如果要监听的是一个对象，那还需要第三个参数：
$scope.data.name = 'Hello';$scope.$watch('data', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++;}, true);
登录后复制
表示比较的是对象的值而不是引用，如果不加第三个参数true，在 data.name 变化时，不会触发相应操作，因为引用的是同一引用。
总结
1) 只有在$scope变量绑定到页面上，才会创建 $watch
2) $apply决定事件是否可以进入angular context
3) $digest 循环检查model时最少两次，最多10次(多于10次抛出异常，防止无限检查)
4) AngularJs自带的指令已经实现了$apply，所以不需要我们额外的编写
5) 在自定义指令时，建议使用带function参数的$apply
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在javaScript中如何使用手机号码校验工具类PhoneUtils
在微信小程序中如何实现下载进度条
在微信小程序中如何使用video组件播放视频
在微信小程序中如何使用audio组件
在微信小程序中有关功能函数总结（详细教程）
以上就是在AngularJs中如何使用双向绑定的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2749545.html
