4

当一个页面上的多个元素有多个指令时，Angular 的 HTML 编译器是如何安排编译顺序的？

假设我有以下标记，其中 alpha、beta 和 gamma 是自定义 Angular 指令，

<html ng-app>
  <alpha><beta></beta></alpha>
  <gamma></gamma>
</html>

编译器对它们的工作顺序是什么？是 alpha => gamma => beta 吗？还是 alpha => beta => gamma？

更复杂一点，考虑 alpha 指令的模板有另一个自定义指令，称为 foo。foo 什么时候被编译？编译完上述所有指令之后？还是在编译 alpha 之后？

4

3 回答 3

3

我在 AngularJS 邮件列表中问了同样的问题，Peter Bacon Darwin 给出了一个很好的答案，并用 jsfiddle 进行了演示。关联

于 2013-02-23T19:46:52.073 回答
1

关于一个元素的多个指令：

这是使用指令“优先级”属性处理的。从文档：Once all directives for a given DOM element have been identified they are sorted by priority and their compile() functions are executed.

请参阅http://docs.angularjs.org/guide/directive

关于指令编译顺序：

Angular 将遍历 DOM - 即按照元素在 DOM 树中出现的顺序拾取元素。从文档：Compile: traverse the DOM and collect all of the directives. The result is a linking function.

请参阅http://docs.angularjs.org/guide/compiler

于 2013-02-20T22:42:23.757 回答
0

其他答案和https://docs.angularjs.org/api/ng/service/$compile的 $compile 函数的 Angular 文档中很好地描述了链接和编译函数的顺序：

  1. 自顶向下编译和预链接（先是父，然后是子）
  2. 以相反的方式发布链接
  3. 同一元素上的指令由它们的优先级属性处理

另外： 4. 在指令中使用templateUrl选项时，该指令在模板加载之前不会编译，但编译器会继续编译其他指令。这将破坏上述编译/链接顺序。

于 2015-01-23T10:33:30.703 回答