AngularJS框架中的数据绑定是如何工作的?

我还没有在他们的网站上找到技术细节。当数据从视图传播到模型时,它是如何工作的,这或多或少是清楚的。但是AngularJS如何在没有setter和getter的情况下跟踪模型财产的更改?

我发现有JavaScript观察者可能会做这项工作。但Internet Explorer 6和Internet Explorer 7不支持它们。那么AngularJS如何知道我更改了例如以下内容,并将此更改反映在视图上?

myobject.myproperty="new value";

当前回答

这是我的基本理解。这很可能是错误的!

通过传递函数(返回要watch)转换为$watch方法。必须在代码块内对关注的项目进行更改由$apply方法包装。在$apply结束时,调用$digest方法通过每一块手表和检查,看看它们是否发生了变化上次运行$digest时。如果发现任何更改,则再次调用摘要,直到所有更改稳定下来。

在正常开发中,HTML告诉AngularJS编译器为您创建手表,并且控制器方法已经在$apply中运行。所以对于应用程序开发人员来说,它是完全透明的。

其他回答

我自己也有一段时间对此感到奇怪。没有setters,AngularJS如何注意到$scope对象的更改?它会投票吗?

它实际上是这样做的:您修改模型的任何“正常”位置都已经从AngularJS的内部调用,因此它会在代码运行后自动为您调用$apply。假设你的控制器有一个方法,它连接到某个元素上的ng点击。因为AngularJS为您将该方法的调用连接在一起,所以它有机会在适当的位置执行$apply。同样,对于出现在视图中的表达式,这些表达式由AngularJS执行,因此它执行$apply。

当文档谈到必须为AngularJS之外的代码手动调用$apply时,它指的是运行时不源自调用堆栈中AngularJS本身的代码。

这是我的基本理解。这很可能是错误的!

通过传递函数(返回要watch)转换为$watch方法。必须在代码块内对关注的项目进行更改由$apply方法包装。在$apply结束时,调用$digest方法通过每一块手表和检查,看看它们是否发生了变化上次运行$digest时。如果发现任何更改,则再次调用摘要,直到所有更改稳定下来。

在正常开发中,HTML告诉AngularJS编译器为您创建手表,并且控制器方法已经在$apply中运行。所以对于应用程序开发人员来说,它是完全透明的。

碰巧我需要将一个人的数据模型与表单链接起来,我所做的是将数据与表单直接映射。

例如,如果模型具有以下内容:

$scope.model.people.name

表单的控制输入:

<input type="text" name="namePeople" model="model.people.name">

这样,如果修改对象控制器的值,这将自动反映在视图中。

我传递的一个从服务器数据更新模型的例子是,当您根据与该视图相关联的殖民地和城市列表的书面加载请求邮政编码和邮编时,默认情况下会向用户设置第一个值。这一点我做得很好,确实发生了,angularJS有时需要几秒钟来刷新模型,为此,您可以在显示数据时放置一个微调器。

数据绑定:

什么是数据绑定?

每当用户更改视图中的数据时,范围模型中就会出现该更改的更新,反之亦然。

怎么可能?

简短回答:借助消化循环。

说明: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的影响。希望台式机足够胖,可以处理这个问题。手机没有那么强。