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

 许小晴晴原_890 发布于 2022-11-22 07:37

近日在读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的用法已经清楚了,但是处理流程到底是怎样的,我不甚明白,请教给我大牛帮忙解释?

1 个回答
  • 这里有比较详细的介绍 http://teropa.info/blog/2015/06/09/transclusion.html

    2022-11-22 08:20 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有