angularjs - 什么时候在指令设置的编译/链接过程中发生嵌入？

Question

我正在编写一个使用嵌入的自定义指令。我需要在转入发生后对转入的 DOM 内容进行修改....我是要在后链接中还是在控制器中或...链接中进行此操作...？我不知道嵌入在这些事情发生的顺序中的位置，所以我不知道如何确保在嵌入发生后执行我的 JS。

Answer 1

嵌入发生在编译阶段。Angular 的$compile服务遍历 DOM，如果指令启用了嵌入，Angular 会提取元素的内容（iftransclude: true或元素本身 - for transclude: 'element'），编译它们，并使编译后的内容在嵌入函数中可用，绑定到嵌入范围。

因此，执行顺序为：

1. Angular 嵌入内容并编译它：被嵌入内容指令的compile函数执行
2. compile指令的函数执行 - 返回pre- 和 -post链接函数
3. controller指令的功能执行
4. pre-link指令的函数执行
5. post-link指令的函数执行。

您可以决定transclude在post-link 函数中执行该函数。只要你这样做，

6. controller转入内容指令的、pre- 和post-link 函数执行

transclude函数在步骤 #3-#5 可用，当被调用时，它会为 提供一个新的嵌入元素副本，cloneAttachFn您将其作为参数提供给transclude函数：

link: function(scope, element, attrs, ctrls, transclude){
    transclude(scope, function cloneAttachFn(clone){
      // you can do DOM manipulation of the clone instance here
    });
}

请注意，其中的 DOM 操作cloneAttachFn将应用于转入 DOM 的实例 - 而不是预编译的 DOM 模板。