javascript - Angular.js 如何处理诸如 "ng-click"之类的事件绑定(bind)?

标签 javascript angularjs angularjs-directive

Angular.js 如何处理事件绑定(bind),例如“ng-click”?

如果我使用 Chrome 开发工具检查 DOM 中的 HTML 输出,我只会看到添加到具有“ng-click”指令、“ng-scope”和“ng-binding”的元素的 2 个类。 Angular 是如何绑定(bind)到 DOM 来拦截这些的?它是否附加到最顶层的元素,并在内存中保留一个大对象将事件映射到它们注册到的 DOM 元素,并利用事件冒泡?还是别的?

最佳答案

AngularJS 会进行脏检查,每次 AngularJS 发现一个指令时,它都会设置一个 $watch 来查看变化。

$watch 列表是一组表达式,自上次迭代以来可能已更改。如果检测到更改,则调用 $watch 函数,这通常会使用新值更新 DOM。一旦 Angular $digest 循环完成,执行就会离开 Angular 和 JavaScript 上下文。随后浏览器重新呈现 DOM 以反射(reflect)任何更改。

简单地说,有一种机制可以创建需要绑定(bind)的指令列表,在 $digest 循环期间,如果浏览器重新呈现 DOM 发生更改,将检查列表是否有更改,它将反射(reflect)到浏览器中。

这是一个非常简短的解释,您可以在这里找到更多:

http://docs.angularjs.org/guide/concepts#runtime

关于javascript - Angular.js 如何处理诸如 "ng-click"之类的事件绑定(bind)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16932229/

相关文章:

javascript - react-router Router.HistoryLocation 用 <noscript> 留下目标,但没有完美地工作

javascript - 使用 Vue 语法的 jQuery DataTables 子行

javascript - 更新 Angular Directive(指令)中的数据

javascript - 从 Angular 指令调用的函数访问属性/$element 上下文

css - 使用 glyphicon 通过 css 标记必填字段

c# - NancyFx 绑​​定 TimeSpan 不工作 json

javascript - 如何检查 ng-show={{}} 表达式与值数组列表是否匹配?

javascript - AngularJS : How can I compile a directive as another directive?

javascript - 尝试在指令中访问 $modelValue 时未定义

JavaScript:使用 setInterval() 将变量从一个函数传递到另一个函数?