在最新的 angular-ui-bootstrap 版本中无法使用鼠标 select 选项卡

Question

我升级了angular-ui-bootstrap版本到2.2.0。这会影响 uib-tabs 行为。我无法使用鼠标单击 select 选项卡，但当我尝试使用键盘导航和 select 时，同样的行为工作正常。我为实现选项卡而编写的代码如下：

<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>

我是否需要添加任何与鼠标单击有关的设置。如果这有助于更好地理解问题，那么这就是 plunker link。 https://plnkr.co/edit/PVrqPEaR9h380gtiR3Uv?p=preview 任何形式的帮助将不胜感激。

Answer 1

您的标签有效（chrome 54），但直接单击锚链接时无效，使用未正确定义它们，请参阅文档。

你应该做的是..

删除锚链接，ui-标签未设计为与 <a> 标签一起使用
active 应该只在 uib-tabset
您可以使用 select 属性来运行选择特定选项卡时的表达式（通过单击选项卡正文或文本）

select() $ - An optional expression called when tab is activated. Supports $event in template for expression.

运行您的状态在表达式将引用的回调内更改或作为标记上的内联表达式

<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

在最新的 angular-ui-bootstrap 版本中无法使用鼠标 select 选项卡

Unable to select tabs using mouse in the latest angular-ui-bootstrap version

html

angularjs

angular-ui-bootstrap