近日在读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的用法已经清楚了,但是处理流程到底是怎样的,我不甚明白,请教给我大牛帮忙解释?
这里有比较详细的介绍 http://teropa.info/blog/2015/06/09/transclusion.html