AngularJS advanced tabs - two ng-transclude

问题

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).

I think, that the best syntax would be

<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>

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

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>

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 ?

回答1:

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

http://plnkr.co/edit/wpgvgr5h6nAQDOZYEHNI?p=preview

来源：https://stackoverflow.com/questions/16181602/angularjs-advanced-tabs-two-ng-transclude