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

时间:2016-02-18 00:19:52

标签: angularjs tabs angular-ui-bootstrap

我正在编写带有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"(不要问我为什么会这样做因为我不知道知道...)但是标签内容一起显示,因为它们都碰巧应用了活动类...任何线索我做错了什么? 谢谢!

1 个答案:

答案 0 :(得分: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>