Javascript 如何在角度上对父对象进行多点转换（示例比标题简单）

我试图在angular中实现一个“simple”tabs指令。唯一的区别是选项卡导航和选项卡内容都可以有html

我希望我的代码如下所示：

 <home-tabs>
        <home-tab>
            <home-tab-header>
                Some html in the first tab header
            </home-tab-header>
            <home-tab-content>
                Some html in the first tab content
            </home-tab-content>
        </home-tab>
        <home-tab>
            <home-tab-header>
                Some html in the second tab header
            </home-tab-header>
            <home-tab-content>
                Some html in the second tab content
            </home-tab-content>
        </home-tab>
</home-tabs>

第一个选项卡标题中的一些html
第一个选项卡内容中的一些html
第二个选项卡标题中的一些html
第二个选项卡中的一些html内容

将生成以下html：

<div class="tabs">
    <div class="nav">
        <div class="nav-el">Some html in the first tab header</div>
        <div class="nav-el">Some html in the secondtab header</div>
    </div>
    <div class="contents">
        <div class="content">Some html in the first tab content</div>
        <div class="content">Some html in the second tab content</div>
    </div>
</div>

第一个选项卡标题中的一些html
第二个选项卡标题中的一些html
第一个选项卡内容中的一些html
第二个选项卡中的一些html内容

这意味着home-tab指令不能在任何地方注入它的元素，而是在父（home-tabs）指令元素的两个不同位置注入它的两个子方向

我知道诀窍可能在于使用home tabs的compile函数或home tab指令，但我不确定到底是什么更干净的方法来实现这一点。我可以用简陋的jquery方法来实现这一点，但我希望有一种更“角度”的方法来解决这个问题。不是吗

---

有什么想法吗？有人能帮我吗？

事实上，他们在这件事上有一个悬而未决的问题：

但是，AngularUI选项卡几乎可以执行您希望使用此语法执行的操作：

<tabset>
  <tab>
    <tab-heading>
      <b>First</b> Tab
    </tab-heading>
    first content
  </tab>
</tabset>

第一选项卡
第一内容

---

也许你可以使用他们的组件或者看看他们的

我查看了angular ui，但忽略了一个事实，即他们将此语法添加为选项卡的选项。谢谢正如预期的那样，对于我们试图实现的目标来说，实现似乎过于复杂，但我至少知道没有更简单的解决方案。在解决方案中接受您的答案。