AngularJS 中的绑定和消化是如何工作的?

2024-03-08

AngularJS 与其他 JavaScript-MVC 框架的区别之一是它能够使用绑定将 JavaScript 中的绑定值回显到 HTML 中。当您为 $scope 变量分配任何值时,Angular 会“自动”执行此操作。

但这有多自动呢?有时,Angular 不会接受更改,因此我需要调用 $scope.$apply() 或 $scope.$digest() 来通知 Angular 接受更改。有时,当我运行这些方法中的任何一个时,它会抛出错误并表示摘要已经在进行中。

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

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


除了文档部分 http://docs.angularjs.org/guide/concepts#runtime由马克发现我认为我们可以尝试列举所有可能的变化来源。

  1. 用户与 HTML 输入的交互('text' https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L378, 'number' https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L498, 'url' https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L560, 'email' https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L577, 'radio' https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L594, '复选框' https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L616)。 AngularJS 有输入指令 https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L762。 'text'、'number'、'url' 和 'email' 输入绑定监听处理程序 https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L380对于“输入”或“按键”事件。监听处理程序调用范围.$apply https://github.com/angular/angular.js/blob/ca30fce28ca13284bfa1c926e810ed75cdcde499/src/ng/directive/input.js#L391。 “radio”和“checkbox”为单击事件绑定类似的处理程序。
  2. 用户与选择元素的交互。 AngularJS 有选择指令 https://github.com/angular/angular.js/blob/master/src/ng/directive/select.js#L121在“更改”事件中具有类似的行为。
  3. 定期更改使用$超时服务 https://github.com/angular/angular.js/blob/f16150d5f1b20b3d633b4402095ea89baa4be042/src/ng/timeout.js#L4那也做$rootScope.$apply() https://github.com/angular/angular.js/blob/f16150d5f1b20b3d633b4402095ea89baa4be042/src/ng/timeout.js#L49.
  4. 事件指令 https://github.com/angular/angular.js/blob/f16150d5f1b20b3d633b4402095ea89baa4be042/src/ng/directive/ngEventDirs.js#L39(ngClick等)也使用范围.$应用 https://github.com/angular/angular.js/blob/f16150d5f1b20b3d633b4402095ea89baa4be042/src/ng/directive/ngEventDirs.js#L47.
  5. $http 还使用$rootScope.$apply() https://github.com/angular/angular.js/blob/209b67df6a49fe1646ce63c5e7d11ed26e8abbc1/src/ng/http.js#L729.
  6. 正如你所知,AngularJS 世界之外的更改应该使用scope.$apply。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS 中的绑定和消化是如何工作的? 的相关文章

随机推荐