AngularJS高级选项卡 - 两个ng-transclude

时间:2013-04-24 00:50:52

标签: angularjs angularjs-directive

Angular UI,仅支持基本选项卡。 我想创建一个支持嵌套选项卡的指令。高级标题(可包括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 - 一个用于窗格,一个用于标题。

因为很容易做第一次ng-transclude(就像在教程中一样):

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

我不知道如何在这里转换标题? 如何保留标签的嵌套结构?

也许这个问题有更好的解决方案?

1 个答案:

答案 0 :(得分:5)

这是一个多重转换示例。我希望它能指出你正确的方向。

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