AngularJS 中的绑定和消化是如何工作的? [英] how does the binding and digesting work in AngularJS?

问题描述

AngularJS 与其他 JavaScript-MVC 框架的不同之处在于它能够使用绑定将绑定值从 JavaScript 回显到 HTML 中.当您为 $scope 变量分配任何值时，Angular 会自动"执行此操作.

One thing that sets apart AngularJS from other JavaScript-MVC frameworks is it's ability to echo bound values from JavaScript into HTML using bindings. Angular does this "automatically" when you assign any value to the $scope variable.

但这有多自动?有时，Angular 不会接受更改，所以我需要调用 $scope.$apply() 或 $scope.$digest() 来通知 angular 接受更改.有时，当我运行这两种方法中的任何一种时，它都会抛出一个错误，并说摘要已经在进行中.

But how automatic is this? Sometimes, Angular won't pick up on the change so I need to call $scope.$apply() or $scope.$digest() to inform angular to pickup the change. Sometimes when I run either of those methods then it throws an error and says that a digest is already in progress.

由于绑定({{ }} 大括号或 ng-attributes 内的任何内容)与 eval 相呼应，这是否意味着 Angular 不断轮询 $scope 对象以查找更改，然后执行 eval 将这些更改推送到DOM/HTML?或者 AngularJS 是否以某种方式想出了使用魔法变量来触发在变量值更改或分配时触发的事件?我从来没有听说过所有浏览器都完全支持它，所以我对此表示怀疑.

Since the bindings (anything inside {{ }} braces or ng-attributes) are echoed with eval then does this mean that Angular is constantly polling the $scope object to look for changes and then performing an eval to push those changes to the DOM/HTML? Or has AngularJS somehow figured out the use magic variables which fire events which are triggered when a variable value changes or is assigned? I've never heard of it being fully supported by all browsers, so I doubt it.

AngularJS 如何跟踪它的绑定和作用域变量?

How does AngularJS keep track of it's bindings and scope variables?

推荐答案

除了 文档部分 由 Mark 发现 我认为我们可以尝试列举所有可能的变化来源.

In addition to the documentation section found by Mark I think we can try to enumerate all possible sources of change.

1. 用户与 HTML 输入的交互('文本', 'number', 'url', 'email', 'radio', '复选框').AngularJS 有 inputDirective.'text'、'number'、'url' 和 'email' 输入绑定 侦听器处理程序 用于 'input' 或 'keydown' 事件.侦听器处理程序 调用范围.$apply.'radio' 和 'checkbox' 绑定类似的点击事件处理程序.
2. 用户与选择元素的交互.AngularJS 有 selectDirective 与类似'change' 事件的行为.
3. 使用$timeout 服务进行定期更改 也可以 $rootScope.$apply().
4. eventDirectives(ngClick 等)也使用 scope.$申请.
5. $http 还使用 $rootScope.$apply().
6. AngularJS 世界之外的更改应该使用 scope.$apply，如您所知.

1. User interaction with HTML inputs ('text', 'number', 'url', 'email', 'radio', 'checkbox'). AngularJS has inputDirective. 'text', 'number', 'url' and 'email' inputs bind listener handler for 'input' or 'keydown' events. Listener handler calls scope.$apply. 'radio' and 'checkbox' bind similar handler for click event.
2. User interaction with select element. AngularJS has selectDirective with similar behavior on 'change' event.
3. Periodical changes using $timeout service that also do $rootScope.$apply().
4. eventDirectives (ngClick, etc) also use scope.$apply.
5. $http also uses $rootScope.$apply().
6. Changes outside AngularJS world should use scope.$apply as you know.

这篇关于AngularJS 中的绑定和消化是如何工作的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！