javascript - Angular对于transclude的处理是什么时候完成的
怪我咯
怪我咯 2017-04-10 15:27:04
[JavaScript讨论组]

近日在读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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号