使用临时的uibt -tabset、uibtab标签元素构建Angular-ui引导选项卡。

I'm writing my nice tabs panel with angular-ui bootstrap directives. Therefore I've included in my project, under a folder called "templates" the two html templates: tab.html and tabset.html. Their code, as it can be found also on GitHub is:

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

tab.html

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

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>

In my html file, in order to build the tabs panes, I have the following code:

在我的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>

Now, the thing is that the tab.html template is correctly used, and I see all my tabs heading, as specified in my html file. However, I don't see any of the tabs content.

现在，问题是标签。html模板被正确使用，我看到所有的选项卡标题，在我的html文件中指定。但是，我没有看到任何选项卡内容。

By playing with the content of tabset.html, I've managed to load the 4 tabs content, substituting the ng-repeat="tab in tabset.tabs" with ng-repeat="tab in tabs" (don't ask me why it works cause I don't know...) but the tabs content display all together, since they all happen to have the active class applied... any clue what I'm doing wrong?? Thanks!

通过播放tabset的内容。html，我已经成功加载了4个选项卡内容，在tabset中替换了ng-repeat="tab "。标签页上的“标签”(不要问我为什么会这样，因为我不知道…)，但是标签内容显示在一起，因为它们都是有活动类应用的…你知道我做错了什么吗?谢谢!

1 个解决方案

#1

I finally got it working, after several hours and thanks to the amazing ng-inspector Chrome plugin, which I wasn't aware of and I strongly recommend to anybody coding in AngularJS, especially if newbee like me. The problem happears to be indeed in the template tabset.html, I changed it this way and it worked

在几个小时之后，我终于让它工作了，多亏了那个令人惊奇的ng-inspector Chrome插件，我没有意识到这一点，我强烈建议任何人在AngularJS中编写代码，尤其是像我这样的newbee。问题发生在模板列表中。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>