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

问题描述

有一件事情，除了设置从AngularJS其他JavaScript-MVC框架是它的使用绑定在JavaScript绑定呼应值到HTML的能力。角做这个自动，当您分配到$范围的变量的任意值。

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.

但是，如何自动这是？有时，角将不会改变拿起所以我需要调用$范围。适用于$（）或$范围。$摘要（）通知角以皮卡的变化。有时，当我跑这些方法要么则抛出和错误，并说摘要已经在进行中。

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 and error and says that a digest is already in progress.

由于绑定（任何内部{{}}大括号或NG-属性）与EVAL呼应那么，这是否意味着角不断地轮询的$范围对象，寻找变化，然后执行一个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输入（用户交互<一个href=\"https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L378\">'text', <一href=\"https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L498\">'number', <一href=\"https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L560\">'url', <一href=\"https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L577\">'email', <一href=\"https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L594\">'radio', <一href=\"https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L616\">'checkbox'). AngularJS有<一个href=\"https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L762\">inputDirective. 文本，数字，URL和电子邮件输入绑定<一个href=\"https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L380\">listener处理了解输入或的keydown事件。侦听器处理程序<一个href=\"https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L391\">calls范围。$应用。单选和复选框绑定点击事件类似的处理程序。


2. 与选择元素的用户交互。 AngularJS有<一个href=\"https://github.com/angular/angular.js/blob/master/src/ng/directive/select.js#L121\">selectDirective与变化事件类似的行为。


3. 使用周期性变化<一个href=\"https://github.com/angular/angular.js/blob/f16150d5f1b20b3d633b4402095ea89baa4be042/src/ng/timeout.js#L4\">$timeout服务也做<一个href=\"https://github.com/angular/angular.js/blob/f16150d5f1b20b3d633b4402095ea89baa4be042/src/ng/timeout.js#L49\">$rootScope.$apply().


4. eventDirectives （ngClick等），也可以使用<一个href=\"https://github.com/angular/angular.js/blob/f16150d5f1b20b3d633b4402095ea89baa4be042/src/ng/directive/ngEventDirs.js#L47\">scope.$apply.


5. $ HTTP也使用<一个href=\"https://github.com/angular/angular.js/blob/209b67df6a49fe1646ce63c5e7d11ed26e8abbc1/src/ng/http.js#L729\">$rootScope.$apply().


6. AngularJS外部世界的变化应该使用范围。$适用，你知道的。

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屋！