Angular UI 选项卡的 Select 事件未按预期工作

Question

我正在使用 Angular UI Tabs 如图所示 below.My 这里的问题是内部 uib-tabset select 事件被触发 load moment.In 换句话说，无需单击该选项卡 (heading="sorry")。你能告诉我如何解决这个问题吗？

这是Plunker.

 <uib-tabset active="active">
    <uib-tab index="0" heading="Static title">Static content</uib-tab>
    <uib-tab index="3" select="alertMe()">
      <uib-tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </uib-tab-heading>
      I've got an HTML heading, and a select callback. Pretty cool!
    </uib-tab>

     <uib-tab heading="My issue">
        <uib-tabset type="pills">
            <uib-tab heading="sorry" select="alertMe()">

            </uib-tab>

        </uib-tabset>
     </uib-tab>

</uib-tabset>

Answer 1

您需要将内部嵌套的uib-tabset 的active 属性设置为null。默认情况下，始终选择第一个选项卡，因此执行 alertMe 功能。

<uib-tabset active="active">
  <uib-tab index="0" heading="Static title">Static content</uib-tab>
  <uib-tab index="3" select="alertMe()">
    <uib-tab-heading>
      <i class="glyphicon glyphicon-bell"></i> Alert!
    </uib-tab-heading>
    I've got an HTML heading, and a select callback. Pretty cool!
  </uib-tab>

  <uib-tab heading="My issue">
    <uib-tabset type="pills" active="null">
      <uib-tab heading="sorry" select="alertMe()">

      </uib-tab>

    </uib-tabset>
  </uib-tab>

</uib-tabset>

Working Plunker

OP 的反馈： 对我来说 active="-1" 有效。

Angular UI 选项卡的 Select 事件未按预期工作

Angular UI Tab's Select event is not working as expected

javascript

angularjs

angular-ui-bootstrap