使用angularjs的嵌套选项卡

Question

需要创建嵌套标签。

在页面中，将有多个Person id选项卡作为外部选项卡，在单击每个选项卡时，它将打开内部选项卡，如Home，Office等，单击内部选项卡 - Home，将显示选项卡内容。

Outertab：人1人2

Innertab：内政部

引用网站 - http://angular-ui.github.io/bootstrap/，创建包含内容的外部标签。创建了2个单独的tabset，但无法在两个tabset之间建立链接。

有人可以帮我解释如何为嵌套标签编写指令吗？有参考链接吗？

Answer 1

我相信AngularUI Router正是您所寻找的。 UI-Router的大部分功能在于它能够嵌套状态和功能。观点。请点击我提供的链接，查看Nested States & Views部分。

此Plunker example合并AngularUI Router以实现您正在寻找的类似功能。

<强> [编辑]

这种由嵌套视图组成的布局正是AngularUI Router用于：

的布局

因此TabsTemplate将动态呈现第一级标签（任意数字）。

TabTemplate可以是没有任何动态内容的模板，因为Home和Office标签始终存在。

OfficeTemplate和HomeTemplate再次是根据当前人选择动态填充的模板。

Answer 2

您可以参考angular bootstrap tabset directive的编写方式。

阅读标签代码有助于我了解指令的工作原理。现在我可以从头开始构建许多组件。

我自己构建了一个更简单的tabset指令版本，它不呈现内容，只是tab-heading元素。所以我可以通过选项卡选择回调来确定内容中的内容。对于嵌套选项卡，我只需要输入另一个tabset指令。