Question

我正在编写带有angular-ui bootstrap指令的漂亮标签面板。因此我在我的项目中包含了一个名为“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"（不要问我为什么会这样做因为我不知道知道...）但是标签内容一起显示，因为它们都碰巧应用了活动类...任何线索我做错了什么？谢谢！

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

使用ad hoc uib-tabset，uib-tab标记元素构建Angular-ui Bootstrap选项卡

1 个答案: