Angular UI Bootstrap <tab> 指令中的嵌入如何工作？答案

【问题标题】：How does transclusion on Angular UI Bootstrap's <tab> directive work?Angular UI Bootstrap <tab> 指令中的嵌入如何工作？
【发布时间】：2015-12-23 12:10:15
【问题描述】：

我目前正在尝试创建一个包含两个嵌入部分的指令，但到目前为止一直没有成功。现在我发现 Angular UI Bootstrap 的 tab 指令就是这样做的！不幸的是，他们使用in their source code 的角度诡计显然太先进了，我无法理解。

在the examples，他们有以下代码：

<tabset>
  <tab select="alertMe()">
    <tab-heading>
      <i class="glyphicon glyphicon-bell"></i> Alert!
    </tab-heading>
    I've got an HTML heading, and a select callback. Pretty cool!
  </tab>
</tabset>

这正是我所需要的。有人可以向我解释我需要采取哪些步骤，以便将 <tab-heading> 内容嵌入到一个位置，而将其他内容嵌入另一个位置吗？

来源中我不明白的事情：

没有指令tabHeading 只有tabHeadingTransclude。那么如何找到<tab-heading> 元素呢？我也没有在任何地方看到对此类元素的查询。
我也不明白tabContentTransclude 和tabHeadingTransclude 这两个transclude-directives。

【问题讨论】：

标签： angularjs angular-ui-bootstrap angularjs-ng-transclude angular-ui-bootstrap-tab

【解决方案1】：

当您查看tabHeadingTransclude 指令时，您几乎拥有它。下面几行是tabContentTransclude 指令。看看源代码here。

最终，tab-heading 属性或<tab-heading> 指令的内容被放置在tab 模板here 中的{{heading}} 表达式内。

您可以从 tabContentTransclude 指令中的 link 函数中收集到这一点：我们在 tab.headingElement 上设置节点的值（tab-heading 属性或 <tab-heading> 指令），我们在tabHeadingTransclude 指令。当它发生变化时，我们会更新模板。

【讨论】：