使用ad hoc uib-tabset，uib-tab標籤元素構建Angular-ui Bootstrap選項卡

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 tabs"代替ng-repeat="tab in tabset.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>