javascript - angular的ng-model是怎么监听视图数据改变的？

问题描述

问 题

<input type="text" ng-model="msg">
<p>{{msg}}</p>
上面代码实现双向数据绑定效果，input的value实时改变的话<p>中也会跟着改变。
现在我写:

   var input=document.getElementByTagName("input")[0];
   setInterval(function(){input.value=100},3000);
   

3秒后input的值确实变成100了，但是<p>里面的值不会变化，这是为什么？
为什么手动输入改变input的值才能实现双向绑定？ angular到底是怎样监听视图里面数据变化的？

解决方案

你这样用原生js去修改dom上的值，实际上脱离了ng的监视范围，所以它不知道view发生了变化，更不会通知与view绑定的model去产生变化，也不好通知其它与这个model绑定的view自动刷新了。

一旦发生了脱离ng监控的case，一般情况下都是用$apply去手动进行脏检测，已达到自动刷新的目的。。

另外你可以思考下，造成model发生改变的根源有哪几种，无外乎是以下几种case
1，用户的输入（用户行为）
2，ajax请求后改变了model
3，settime之类的重复操作
4，欢迎补充

angular用它强大的封装来监控了以上几种可能影响model的case，如ng-click等eventhandler，$http等ajax封装，$timeout等封装。所以只要model的改变没有脱离ng的魔爪（自动触发脏检测），view都是能自动更新的。

这篇关于javascript - angular的ng-model是怎么监听视图数据改变的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！