这是指令：
module.directive('myTransclude',function() {
return {
restrict: 'A',transclude: true,replace: true,scope: true,template: '<div style="border: 1px solid {{color}}"><div class="my-transclude-title"></div><div class="my-transclude-body"></div></div>',link: function(scope,element,attrs,controller,transclude) {
// just to check transcluded scope
scope.color = "red";
transclude(scope,function(clone,scope) {
Array.prototype.forEach.call(clone,function(node) {
if (! node.tagName) {
return;
}
// look for a placeholder node in the template that matches the tag in the multi-transcluded content
var placeholder = element[0].querySelector('.' + node.tagName.toLowerCase());
if (! placeholder) {
return;
}
// insert the transcluded content
placeholder.appendChild(node);
});
});
}
}
});
这是示例用法：
<div ng-controller="AppController">
<div my-transclude>
<my-transclude-title> <strong ng-bind="title"></strong>
</my-transclude-title>
<my-transclude-body>My name is {{name}} and I've been transcluded!</my-transclude-body>
</div>
</div>
您可以在this fiddle中看到它的运行情况.
请注意以下几点：
>它通过元素类将片段与模板占位符匹配,而不是显式定义的子指令.有什么理由这样或那样做吗？
>与我见过的许多例子不同,它没有明确地在子片段上使用$compile服务.似乎Angular在翻译后编译片段,至少在这个简单的情况下.这总是正确的吗？
>它使用链接函数的(几乎没有记录的)transclude参数,而不是将$transclude local注入到controller指令中的其他(几乎没有文档记录)方法.在听到如此多的告诫不操纵控制器中的DOM之后,控制器方法看起来像是一个奇怪的构造,在链接函数中处理这种情况感觉更自然.但是,我尝试了这种方式,它似乎也一样.这两者有什么区别吗？
谢谢.
编辑：为了部分回答问题#2,我发现你确实需要显式编译未应用指令的模板克隆的被转换内容.请参阅此处的行为差异：http://jsfiddle.net/4tSqr/3/
更新：根据1.4 Angular文档,编译(transclude)已被弃用！因此,只能在指令Controller或Linking函数中访问transclude函数. (参见detail explanation的官方文档)
在编译阶段使用$transclude与在控制器和链接阶段使用$transclude有很大的不同,因为在编译阶段,你没有访问$scope与在控制器和链接函数中使用$scope(控制器)和范围(链接)是可访问的.话虽如此,在指令控制器与链接中使用$transclude的唯一区别是执行顺序.对于多个嵌套指令,在链接阶段使用$transclude而不是在控制器中使用它是相对安全的.
订单如下：
> parentDirectiveCompile – > childDirectiveCompile(指令编译)
> parentDirectiveControllerPre,parentDirectiveControllerPost – > childDirectiveControllerPre,childDirectiveControllerPost(指令控制器)
> childLinkFunction – > parentLinkFunction
请注意childLinkFunction如何在parentLinkFunction之前首先执行？ (执行顺序)
有用的资源：
> Angular directives – when and how to use compile,pre-link and post-link
希望这个答案对你有所帮助！
