【问题标题】：Order of execution of directive functions in AngularJSAngularJS中指令函数的执行顺序
【发布时间】：2013-04-10 21:39:15
【问题描述】：

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

前

回答

来自下面的answer：http://plnkr.co/edit/79iyKSbfxgkzk2Pivuak（plunker 显示嵌套和同级指令）

【问题讨论】：

编译、控制器、链接。我不知道模板。另见github.com/angular/angular.js/wiki/Understanding-Directives
@MarkRajcok，谢谢！不过，我需要了解所有 4 个。
@jacob - 这是关于 compileFn、controllerFn、preLinkFn 和 postLinkFn 执行顺序的demonstration。你说的模板评估是指模板编译吗？
@tamakisquare，是的，我的意思是模板编译（当模板可用时）。
@jacob - 在最终渲染视图中可用吗？如果是这样，在完成 linkFn/postLinkFn 之前不会发生，因为 linkFn/postLinkFn 是 DOM 操作和转换发生的地方。

【解决方案1】：

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

给定这个 DOM 使用指令 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

【讨论】：

很好，我已经分叉了你的 plunker 来记录 preLink 阶段。 plnkr.co/edit/79iyKSbfxgkzk2Pivuak 看起来 preLink 阶段是在控制器实例化之后直接发生的
完美——短小精悍的例子

【解决方案2】：

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

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

以上内容摘自directives 上的官方文档。

所以，回答您的问题，后链接/链接功能是您可以安全操作 element.children() 的时间/地点。

【讨论】：

所以：控制器、编译、预链接、模板、后链接？
@jacob - 是的，因为element.children() 只供您在 postLinkFn 中访问。需要注意的是，您的问题是关于指令 functions 的执行顺序，而您所指的 template 根本不是函数。
@jacob，不，编译在控制器之前（但我假设您知道这一点，并且您可能只是输入了错误的评论）。我将在编译功能中添加您可以更改模板。但是，在那里所做的任何更改都会影响所有 DOM 克隆（例如，对于像 ng-repeat 这样的指令，在 compile 函数中对 tElement 进行更改将影响每个克隆实例）。综上所述：模板 DOM (tElement) 可以在编译中更改，实例 DOM (iElement) 可以在链接后更改。
@tamakisquare：哦，是的，模板并不是真正的函数。我想不出另一个涵盖所有这些的术语（template 是传递给函数的属性，compile 等是方法/函数）。
为什么这个答案被标记为正确？这个答案解决了“在 DOM 上操作哪个函数是安全的？”这个问题。但不是问题“控制器、编译和链接函数的执行顺序是什么？”