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, 4 months ago