Sampath Sampath - 4 months ago 79
AngularJS Question

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

I'm using Angular UI Tabs as shown below.My issue here is the inner

uib-tabset
select
event is being fired on
load
moment.In other words without clicking that tab (
heading="sorry"
).Can you tell me how to sort out this issue?

Here is the 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

You need to set the active attribute of the inner, nested uib-tabset to null. By default the first tab is always selected hence the alertMe function is executed.

<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