Question

我目前正在尝试创建一个具有两个已转换部分的指令，但到目前为止还没有成功。现在我发现Angular UI Bootstrap的tab指令就是这么做的！不幸的是，他们拉出https://github.com/troywatson/Lawrence-Style-Checker的角度诡计显然太过于先进而无法理解。

在in their source code中，他们有以下代码：

<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指令时， ALMOST 拥有它。向下几行是tabContentTransclude指令。看一下源代码here。

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

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

如何在Angular UI Bootstrap的<tab>指令上进行转换？

1 个答案: