javascript - AngularJS中指令函数的执行顺序

Question

指令函数的执行顺序是什么？该文档似乎没有解决这个问题。

前任

1. 模板/模板Url（被评估）
2. 控制器Fn
3. 编译Fn
4. 链接Fn

回答

从下面的答案： http ://plnkr.co/edit/79iyKSbfxgkzk2Pivuak（plunker 显示嵌套和兄弟指令）

1. 模板被解析
2. compile()（在编译中对模板所做的更改会扩散到链接功能）
3. controller()
4. preLink()
5. postLink()

Answer 1

在相关说明中，这里是我对跨 DOM 执行顺序的理解。

这是一个演示（打开浏览器JS控制台）

给定这个 DOM using 指令foo：

  <div id="1" foo>
    one
    <div id="1_1" foo>one.one</div>
  </div>

  <div id="2" foo>two</div>

...AngularJS 将以深度优先顺序遍历 DOM - 两次：

第一遍 foo.compile()

1）编译：1

2）编译：1_1

3）编译：2

第二遍： foo.controller() 向下遍历；回溯时的 foo.link()

控制器：1

控制器：1_1

链接：1_1

链接：1

控制器：2

链接：2

Answer 2

预链接功能：在子元素链接之前执行。进行 DOM 转换是不安全的，因为编译器链接函数将无法找到正确的链接元素。

链接后功能：在子元素链接后执行。在 post-linking 函数中进行 DOM 转换是安全的。

以上摘录摘自关于指令的官方文档。

因此，为了回答您的问题，Post-linking/Link 功能是您可以安全操作 element.children() 的时间/地点。