何时在指令的设置的编译/链接过程中进行转换？

Question

我正在编写一个使用transclusion的自定义指令.我需要在进行转换后对已转换的DOM内容进行修改....我想在后链接或控制器中执行此操作还是...链接...？我不知道transclusion在哪里发生的事情顺序,所以我不知道如何确保我的JS在转换发生后执行.

Answer 1

转换发生在编译阶段.Angular的$compile服务遍及DOM,如果指令启用了transclusion,Angular会提取元素的内容(if transclude: true,或元素本身 - for transclude: 'element'),编译它们,并使编译内容在transclusion函数中可用,绑定到划分范围.

所以,执行顺序是:

1. Angular转换内容并编译它:transcluded content指令的compile函数执行
2. compile指令的函数执行 - 返回pre- 和 - post链接函数
3. controller指令的功能执行
4. pre指令的 -link函数执行
5. post指令的 -link函数执行.

您可以决定transclude在post-link函数中执行该函数.一旦你这样做,

6. controller执行包含transcluded内容指令的,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中的DOM操作cloneAttachFn将应用于已转换DOM的实例 - 而不是预编译的DOM模板.