如何在帶有靜態內容的angularjs bootstrap選項卡上設置活動狀態

Question

我正在使用Angular Bootstrap UI來顯示靜態內容的Tabset。我包含的引導腳本是ui-bootstrap-tpls-0.6.0.min.js。

這裏是我的標記：

<tabset> 
    <tab ng-show="$parent.hideme" ng-class="{active:$parent.hideme}"> 
     <tab-heading> 
      tab1 
     </tab-heading> 
     <div> 
      tab content 1 
     </div> 
    </tab> 
    <tab ng-hide="$parent.hideme" ng-class="{active:!$parent.hideme}"> 
     <tab-heading> 
      tab2 
     </tab-heading> 
     <div> 
      tab content 2 
     </div> 
    </tab> 
</tabset> 

這裏是控制器

function myController($scope) { 
    $scope.hideme = false; 
}); 

如果沒有應用的標籤上我納克級，它工作得很好，只是當第一片隱藏和第二個選項卡顯示（$ scope.hideme = false），第一個選項卡的內容將顯示avtive。

如果我添加了ng-class，它會在angularjs中導致一個錯誤。錯誤：[$ parse：syntax] http://errors.angularjs.org/undefined/ $ parse/syntax？p0 =％7B & p1 = is％20an％20unexpected％20token & p2 = 16 & p3 =％7Bactive％3Afalse％7D％20％7Bactive％3A％20active％ 2C％20disabled％3A％20disabled％7D & P4 =％7Bactive％3A％20active％2C％20disabled％3A％20disabled％7D

什麼是正確的方式（或右語法），以使特定標籤是否有效？

Answer 1

我建議不要嘗試顯示/隱藏邏輯。我也對此感到沮喪，因爲UI Bootstrap Tab documentation只顯示導航到通過ng-repeat綁定創建的選項卡。

但我相信你可以引用tabset指令中的標籤爲$ parentScope.tabs。因此，簡單的導航，可以使用$parent.tabs[2].select()：

<tabset> 
    <tab heading="Tab 1"> 
    <button class="btn btn-success" ng-click="$parent.tabs[2].select()">Go to Tab 3</button> 
    </tab> 
    <tab heading="Tab 2"> 
    <p>Tab 2 contents</p> 
    </tab> 
    <tab heading="Tab 3"> 
    <button class="btn btn-danger" ng-click="$parent.tabs[0].select()">Back to Tab 1</button> 
    </tab> 
</tabset> 

我有一個working Plunker example沒有什麼幫助。