3

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

在示例中，它们具有以下代码：

<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-directivestabContentTransclude和tabHeadingTransclude.
4

1 回答 1

1

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

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

link您可以从指令中的函数中收集到这一点：我们在指令中设置我们正在观察tabContentTransclude的节点（tab-heading属性或<tab-heading>指令）的值。当它改变时，我们更新模板。tab.headingElementtabHeadingTransclude

于 2015-09-29T00:30:19.417 回答