AngularJS高级选项卡 - 两个NG-transclude [英] AngularJS advanced tabs - two ng-transclude

问题描述

角UI，只有基本的标签支持。
我想创造一个能够支持嵌套的标签和放指令;先进的标题（可以包含HTML）。

Angular UI, has support only for basic tabs. I wanted to create a directive that would support nested tabs & advanced headings (that can include html).

我认为，最好的语法是

<tabs>
    <tab>
        <title><i class="myIcon"></i> Title 1</title>
        <p>Content 1</p>
    </tab>
    <tab>
        <title class="pull-right">Title 2 (Nested)</title>
            <tab>
                <title>Title 2.1</title>
                <p>Content 2.1</p>
            </tab>
        <p>Content 2</p>
    </tab>
</tabs>

我的这种方法的问题是，我需要2 NG-transclude - 一个窗格和一个冠军。

My problem with this approach, is that I would need 2 ng-transclude - one for panes and one for titles.

由于这将是很容易做的第一NG-transclude（就像在教程中）：

As it would be very easy to do the first ng-transclude (just like in the tutorial):

<div>
    <ul>
        <li ng-repeat="pane in panes" transclude-title></li>
    </ul>
    <div class="tab-content" ng-transclude="">
    </div>
</div>

我没有任何想法，我怎么可以在这里transclude冠军？
我怎样才能标签preserve嵌套结构？

I don't have any idea how can I transclude titles here? How can I preserve nested structure of tabs ?

也许有更好的解决这个问题呢？

Maybe there is a better solution to this problem ?

推荐答案

这是一个多transclude例子。我希望这点你到正确的方向。

This is a multiple transclude example. I hope it points you into the right direction.

<一个href=\"http://plnkr.co/edit/wpgvgr5h6nAQDOZYEHNI?p=$p$pview\">http://plnkr.co/edit/wpgvgr5h6nAQDOZYEHNI?p=$p$pview

这篇关于AngularJS高级选项卡 - 两个NG-transclude的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！