無法在最新的angular-ui-bootstrap版本中使用鼠標選擇標籤

Question

我將angular-ui-bootstrap版本升級到2.2.0。這影響了uib-tabs的行爲。我無法使用鼠標點擊選擇一個選項卡，但當我嘗試導航並選擇使用鍵盤時，相同的行爲正常工作。我寫來實現標籤的代碼如下：

<uib-tabset active="active" class="tabs-flat"> 
    <uib-tab index="0" active="states['alert-details.overview']"> 
     <uib-tab-heading><a ui-sref="alert-details.overview" translate class="tab-head">Overview</a></uib-tab-heading> 
    </uib-tab> 
    <uib-tab index="1" active="states['alert-details.history']"> 
     <uib-tab-heading><a ui-sref="alert-details.history" translate class="tab-head">History</a></uib-tab-heading> 
    </uib-tab> 
    <uib-tab index="2" active="states['alert-details.trigger']"> 
     <uib-tab-heading><a ui-sref="alert-details.trigger" translate class="tab-head">Trigger Events</a></uib-tab-heading> 
    </uib-tab> 
    <uib-tab index="3" active="states['alert-details.all-fields']"> 
     <uib-tab-heading><a ui-sref="alert-details.all-fields" translate class="tab-head">All Alert Fields</a></uib-tab-heading> 
    </uib-tab> 
    </uib-tabset> 

我是否需要添加有關鼠標點擊任何設置。如果這有助於更好地理解問題，那麼這是蹦牀鏈接。 https://plnkr.co/edit/PVrqPEaR9h380gtiR3Uv?p=preview 任何形式的幫助將不勝感激。

Answer 1

您的選項卡可以工作（chrome 54），但是當直接點擊錨鏈接時，不能正確定義它們，請參閱文檔。

你應該做的是..

1. 取下錨鏈接，用戶界面的選項卡在設計時沒有<a>標籤

   工作

2. active只應在uib-tabset

3. 您可以使用select屬性在選擇特定選項卡（通過單擊選項卡正文或文本）時運行表達式

select（）$ - 激活選項卡時調用的可選表達式。支持表達式模板中的$ event。

運行回調內的狀態變化，該表達式將是指或作爲內嵌表達上您的標記

<uib-tabset class="tabs-flat" active="selectedIndex"> 
    <uib-tab index="0" select="$state.go('alert-details.overview')"> 
     <uib-tab-heading> 
      Overview 
     </uib-tab-heading> 
    </uib-tab> 
.... 
</uib-tabset