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 中的绑定和消化是如何工作的? 的相关文章

  • AngularJS - 选择单选按钮时触发

    我搜索并尝试了很多 ng xxxx 类型的选项 但找不到那个 我只想在选择单选按钮时调用控制器中的某些功能 所以它可能类似于以下 当然 下面的代码不起作用
  • 使用 Angular JS 调用 Restful API 时的跨域问题

    我正在尝试访问一个宁静的 API 这会产生错误 如何解决这个跨域问题 错误是 Access Control Allow Origin header is present on the requested resource function
  • 如何向 DOM 添加支持 Angular 的元素?

    我想以编程方式添加一些支持 Angular 的 DOM 元素 实际上 我可能需要添加自定义组件 我该怎么做 这是一个简单的小提琴来演示这个问题 http jsfiddle net ZJSz4 2 http jsfiddle net ZJSz
  • 在 for 循环中突破 Promise 块

    我有以下代码 this storeNameValidate function stores var deferred q defer console log stores for storeIndex in stores this name
  • 如何触发UI-Router View Load事件?

    第一次测试 ui router 但目前测试事件 我似乎无法理解如何触发 viewContentLoaded 或 Loading 虽然 我已经有 stageChangeSuccess 等工作了 我只是把一切都推到了http punkbit c
  • JSON 数据的动态表单(不同类型)

    我尝试使用 JSON 中的数据在 AngularJS 中创建动态表单 我有这个工作 HTML p p
  • 如何并排展开和折叠三个div?

    document ready function toggle click function if this data name show sidebar animate width 10 hide map animate width 89
  • AngularJs 从自身调用内部服务函数

    我构建了一个发出多个请求的简单服务 该服务有两种方法 我无法从服务内的另一种方法调用一种方法 Plunkr http plnkr co edit 2fERik4uTxbxlVOhncMd p preview http plnkr co ed
  • 角度 ui 路由器的动态参数

    我想知道在更改状态并发送请求以从后端获取模板时如何包含参数 这是我的应用程序 angular module questionnaireApp ngAnimate ui router ui bootstrap config stateProv
  • 在 Angular ui-router 中更改状态而不更改浏览器历史记录

    假设我们有这样的逻辑 从状态A改变到状态B 每当我们到达状态 B 时 应用程序总是通过调用将我们重定向到状态 C state go stateC 现在我们处于状态C 我的问题是如何从状态 C 返回状态 A 考虑到状态 A 可以是我们在运行时
  • 如何创建自定义输入类型?

    例如 我想创建一个类似于 AngularJS 实现 电子邮件 的方式的自定义输入类型
  • D3.js折线图溢出边距

    我有 d3 js 折线图 它作为 angular js 应用程序的指令包含在内 动态添加的线和 xAxis 以及缩放线上的边距溢出 我必须在图的顶部为每条加载的线创建 Ox 轴 并具有 Ox 和 Oy 单独的缩放可能性 Oy 缩放工作正常
  • 如何使用 ng-if 测试变量是否已定义

    有没有办法使用ng if测试变量是否已定义 而不仅仅是它是否为真 在下面的示例中 现场演示 http plnkr co edit jKPN0dOHDWBtPxJHXv2R p preview HTML 仅显示红色商品的运费 因为item s
  • cordova.js 导致引用错误“未定义需求”

    我想用恩科尔多瓦检测设备的网络状态 然而 一旦我包括科尔多瓦 js我收到一个错误 未捕获的引用错误 未定义 require cordova js 23 我已经安装并成功运行Node js and Cordova 我已经下载并安装了恩科尔多瓦
  • 选择器的内部文本

    我尝试从此标记中获取内部文本 span class ng binding ng scope Displaying results 1 25 of 17 430 span 使用此选择器 document querySelectorAll di
  • AngularJS 插值错误

    我正在显示房间的属性 作为我正在开发的房间管理应用程序的一部分 这是输出 如您所见 Beamer 英文投影仪 的值为 Sony lamp 01 12 2013 此输出是正确的 但当我打开控制台时 我看到一些有关插值的错误 更大的分辨率 Ca
  • 单元测试依赖注入

    我对茉莉花和业力是全新的 我相信我的环境设置正确 并且我能够运行非常基本的单元测试 但是一旦我尝试实例化控制器 我就会收到未知提供程序错误 并且我不确定如何调试它 我需要传入 stateProvider 依赖项吗 我在角种子示例中没有看到这
  • BUG - 在 IOS 中没有选择标签的完成按钮

    我正在使用最新的离子并有一个简单的选择标签
  • 包含routeChangeSuccess的AngularJS测试控制器

    我正在尝试创建单元测试来测试导航列表控制器 但在创建测试时遇到问题 这是控制器的代码 navListModule controller NavListCtrl scope NavList function scope NavList sco
  • 如何正确清理来自 AngularJS 控制器的无效输入的表单?

    我有一个 AngularJS 表单 其中包含 除其他字段之外 类型之一url 后者很重要 因为这会强制相应的输入成为有效的 URL 在某些条件下 例如 要关闭具有此类表单的模式对话框 我想以编程方式清除该表单 为此 我实现了方法reset基

随机推荐