Angular对于transclude的处理是什么时候完成的


近日在读Angular的源码,知道Angular对于指令的解析分为编译和链接两个阶段

编译阶段收集各种信息,应用指令到节点上,其中这个阶段会对各种属性进行处理,这里给出一段关于transclude的处理源码:


 if (directiveValue = directive.transclude) {  
  hasTranscludeDirective = true;
  // element
  if (directiveValue == 'element') {
    hasElementTranscludeDirective = true;
    terminalPriority = directive.priority;
    $template = $compileNode;
    // 删除当前节点,替换为注释
    $compileNode = templateAttrs.$$element =
        jqLite(document.createComment(' ' + directiveName + ': ' + templateAttrs[directiveName] + ' '));
    compileNode = $compileNode[0];
    replaceWith(jqCollection, sliceArgs($template), compileNode);

    // 编译当前节点
    childTranscludeFn = compile($template, transcludeFn, terminalPriority,  replaceDirective && replaceDirective.name, { nonTlbTranscludeDirective: nonTlbTranscludeDirective});
  } else { // true
    // 复制当前节点内容
    $template = jqLite(jqLiteClone(compileNode)).contents();
    // 清空当前节点
    $compileNode.empty();
    // 编译复制的内容
    childTranscludeFn = compile($template, transcludeFn);
  }
}

对于transclude: 'element',处理是将当前节点及其内容替换为注释,但是原来的内容还是会继续编译,只是已经脱离文档了

对于transclude:true,获取当前节点内容,然后清空当前节点内容,接着编译节点内容,也就是内容被清空了,但是内容会被编译,只是也已经脱离文档流了。

再说链接阶段,这个阶段会有一系列处理,包括scope创建,pre-link,递归链接阶段,post-link,但是关于transclude,并没有看到段脱离文档的内容在什么地方再次插入文档之中的,那么tranclude到底是怎么处理的呢。

关于transclude的用法已经清楚了,但是处理流程到底是怎样的,我不甚明白,请教给我大牛帮忙解释?

web前端开发 web angularjs JavaScript

暴走的马丁 10 years, 3 months ago
FU了个CK answered 10 years, 3 months ago

Your Answer