angularjs - Angular UI Bootstrap 指令中的嵌入如何工作？

Question

我目前正在尝试创建一个包含两个嵌入部分的指令，但到目前为止没有成功。现在我发现 tab Angular UI Bootstrap 的指令正是这样做的!不幸的是，他们使用的 Angular 诡计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>怎么样了元素找到了，然后呢？我也没有在任何地方看到对此类元素的查询。
• 我也不明白这两个transclude-directives tabContentTransclude和 tabHeadingTransclude .

Answer 1

当您查看 tabHeadingTransclude 时，您几乎拥有它指示。再往下几行是 tabContentTransclude指示。看看源码here .

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

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