AngularJS框架中的数据绑定是如何工作的?
我还没有在他们的网站上找到技术细节。当数据从视图传播到模型时,它是如何工作的,这或多或少是清楚的。但是AngularJS如何在没有setter和getter的情况下跟踪模型财产的更改?
我发现有JavaScript观察者可能会做这项工作。但Internet Explorer 6和Internet Explorer 7不支持它们。那么AngularJS如何知道我更改了例如以下内容,并将此更改反映在视图上?
myobject.myproperty="new value";
数据绑定:
什么是数据绑定?
每当用户更改视图中的数据时,范围模型中就会出现该更改的更新,反之亦然。
怎么可能?
简短回答:借助消化循环。
说明:Angular js在作用域模型上设置观察者,如果模型发生变化,它会触发监听器函数。
$scope.$watch('modelVar' , function(newValue,oldValue){
//使用新值更新Dom代码
});
那么何时以及如何调用观察程序函数?
作为摘要循环的一部分调用观察程序函数。
摘要循环是作为angular js内置指令/服务的一部分自动触发的,如ng model、ng bind、$timeout、ng click等。。让你触发消化周期。
摘要循环功能:
$scope.$digest() -> digest cycle against the current scope.
$scope.$apply() -> digest cycle against the parent scope
即$rootScope.$apply()
注:$apply()等于$rootScope$digest()这意味着脏检查从根或顶部或父作用域开始,一直到angular js应用程序中的所有子$scopes。
上述功能适用于上述版本的浏览器IE,只需确保您的应用程序是angular js应用程序,这意味着您使用的是脚本标记中引用的angularjs框架脚本文件。
非常感谢。
用图片解释:
数据绑定需要映射
作用域中的引用与模板中的引用不完全相同。当您数据绑定两个对象时,需要第三个对象侦听第一个对象并修改另一个对象。
在这里,当您修改<input>时,您会触摸data-ref3。经典的数据绑定机制将改变data-ref4。那么其他{{数据}}表达式将如何移动?
事件导致$digest()
Angular维护每个绑定的oldValue和newValue。在每一个Angular事件之后,著名的$digest()循环都会检查WatchList以查看是否发生了变化。这些Angular事件是ng单击、ng更改、$http完成。。。只要任何oldValue与newValue不同,$digest()就会循环。
在上一张图片中,它将注意到data-ref1和data-ref2已更改。
结论
这有点像鸡蛋和鸡肉。你永远不知道是谁开始,但希望大多数时候都能像预期的那样。
另一点是,您可以很容易地理解简单绑定对内存和CPU的影响。希望台式机足够胖,可以处理这个问题。手机没有那么强。