角度选择性嵌入答案

【问题标题】：Angular Selective Transclude角度选择性嵌入
【发布时间】：2014-04-24 01:02:21
【问题描述】：

有没有人知道有一种方法可以让指令选择性地嵌入指令的主体？

例如，如果我有以下 div 和 myWrapper 的指令。

<div data-my-wrapper="foo">
    <h1>Hello World</h1>
</div>

我想在我的指令中包含类似于此伪代码的代码。

if (foo.locked) {
   // user a static template saying that the item is locked.
}
else {
   // Tranclude the body content
}

有没有办法指示指令应该嵌入哪些内容？或者是否有推荐的方法来获得相当于 if/then/else 的方法，可以让我换出内容而不是指令所在的元素的主体？

【问题讨论】：

您可能正在寻找 transclude 链接函数（即指令 link 函数的第五个参数）来访问已嵌入的内容以执行您需要做的事情。这是一个快速演示JSFiddle。
@miqid - 这就是我要找的！你能把这个作为答案让我接受吗？谢谢，我从来不知道控制器之后还有另一个参数！

【解决方案1】：

您可以通过使用第五个参数来访问指令的link 函数内的转入内容，这恰好是一个转入链接函数。还记得设置指令的transclude 属性。

function link(scope, iElement, iAttrs, controller, transcludeFn) { ... }

下面是 transclude 链接功能的粗略演示：JSFiddle。

很高兴有帮助。

注意：

请注意，如果您使用的是 1.2.x 之前的 AngularJS 版本，则可以将 transclude 链接函数用作指令的 compile 属性的第三个参数。正如official documentation 指出的那样，这已被弃用。

【讨论】：