使用特殊的 uib-tabset、uib-tab 标记元素构建 Angular-ui Bootstrap 选项卡答案

【问题标题】：Building Angular-ui Bootstrap tabs with ad hoc uib-tabset, uib-tab tag elements使用特殊的 uib-tabset、uib-tab 标记元素构建 Angular-ui Bootstrap 选项卡
【发布时间】：2016-05-29 23:14:02
【问题描述】：

我正在使用 angular-ui 引导指令编写我的漂亮标签面板。因此，我在我的项目中包含了一个名为“templates”的文件夹下的两个 html 模板：tab.html 和 tabset.html。他们的代码（也可以在 GitHub 上找到）是：

tab.html

<li ng-class="{active: active, disabled: disabled}" class="uib-tab nav-item">
    <a href ng-click="select()" class="nav-link" uib-tab-heading-transclude>{{heading}}</a>
</li>

tabset.html

<div>
    <ul class="nav nav-{{tabset.type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
    <div class="tab-content">
         <div class="tab-pane"
         ng-repeat="tab in tabset.tabs"
         ng-class="{active: tabset.active === tab.index}"
         uib-tab-content-transclude="tab">
         </div>
     </div>
</div>

在我的 html 文件中，为了构建选项卡窗格，我有以下代码：

<uib-tabset>
    <uib-tab heading="Profile">
        <ng-include src="'components/dashboard/profile_tab.html'"></ng-include>
    </uib-tab>
    <uib-tab heading="Projects">
        <ng-include src="'components/dashboard/projects_tab.html'"></ng-include>
     </uib-tab>
     <uib-tab heading="Quotes">
        <ng-include src="'components/dashboard/quotes_tab.html'"></ng-include>
     </uib-tab>
     <uib-tab heading="Reviews">
        <ng-include src="'components/dashboard/reviews_tab.html'"></ng-include>
     </uib-tab>
</uib-tabset>

现在，问题是 tab.html 模板已正确使用，并且我看到了所有选项卡标题，如我的 html 文件中指定的那样。但是，我没有看到任何选项卡内容。

通过使用 tabset.html 的内容，我设法加载了 4 个选项卡内容，将 ng-repeat="tab in tabset.tabs" 替换为 ng-repeat="tab in tabs"（不要问我为什么它有效，因为我不知道.. .) 但是标签内容一起显示，因为它们都碰巧应用了活动类......任何线索我做错了什么？谢谢！

【问题讨论】：

标签： angularjs tabs angular-ui-bootstrap

【解决方案1】：

我终于在几个小时后让它工作了，这要归功于我不知道的惊人的 ng-inspector Chrome 插件，我强烈推荐给任何使用 AngularJS 编码的人，尤其是像我这样的新手。问题确实出在模板 tabset.html 中，我这样改了，效果很好

<div>
    <ul class="nav nav-{{type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
    <div class="tab-content">
        <div class="tab-pane"
             ng-repeat="tab in tabs"
             ng-class="{active: tab.active}"
             uib-tab-content-transclude="tab">
        </div>
    </div>
</div>

【讨论】：