<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都是能自动更新的。