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

问题描述

Angular UI，仅支持基本选项卡.我想创建一个支持嵌套选项卡的指令 &高级标题(可以包含 html).

我认为最好的语法是

<标签><title><i class="myIcon"></i>标题 1<p>内容1</p></tab><标签><title class="pull-right">Title 2(嵌套)</title><标签><title>Title 2.1</title><p>内容2.1</p></tab><p>内容2</p></tab></tabs>

我对这种方法的问题是，我需要 2 个 ng-transclude - 一个用于窗格，一个用于标题.

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

<ul><li ng-repeat="窗格中的窗格" transclude-title></li><div class="tab-content" ng-transclude="">

我不知道如何在此处嵌入标题?如何保留选项卡的嵌套结构?

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

解决方案

这是一个多嵌入示例.我希望它为您指明了正确的方向.

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

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 ?

解决方案

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

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

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