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

Posted

技术标签:

【中文标题】AngularJS 高级选项卡 - 两个 ng-transclude【英文标题】:AngularJS advanced tabs - two ng-transclude 【发布时间】:2013-04-17 09:22:58 【问题描述】:

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>

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

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

【问题讨论】:

您可以将嵌入作为第三个参数传递给您的compile 函数,然后手动遍历它。 为什么不创建自己的指令。根据您对“嵌套选项卡”的说法,您可以查看 this 文章,该文章演示了如何使用嵌套指令创建嵌套视图(或在您的情况下为嵌套选项卡)。 【参考方案1】:

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

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

【讨论】:

我对这段代码很感兴趣,但是 plnkr 坏了。您能否修复 plnkr,以便我可以了解有关编译和嵌套嵌入的更多信息? @Martijn 我想我现在更正了。你可以试一试,让我知道它是否可以?链接在这里:plnkr.co/edit/wpgvgr5h6nAQDOZYEHNI 是的,它现在可以工作了,谢谢!哪里错了?我想不通。 @Martijn 我做了几处更改: 1 - 更新到最近的 Angular 版本 2 - 使用 angular-ui-bootstrap tabset 指令而不是我拥有的那个 3 - 存储标题和内容的实际 html 字符串jquery 选择器结果的结果——html 在途中丢失了——我认为这是关键的变化 啊,好吧。再次感谢!

以上是关于AngularJS 高级选项卡 - 两个 ng-transclude的主要内容,如果未能解决你的问题,请参考以下文章

使用 AngularJS 在 Bootstrap 选项卡中重新加载数据

如果在 2 个浏览器选项卡上,Angularjs 通知显示两次

AngularJs选项卡的不同写法

AngularJS - 在选项卡/窗口之间共享一个 websocket

angularjs显示/隐藏选项卡,单击相同选项卡隐藏内容

使用 AngularJS 的引导指令在选项卡中添加图像