Trouble with active tab default using AngularJS, UI Boostrap, and UI Router

Question

When using a UI Boostrap tabset along with nested sticky states created with ui-router and ui-router-extras, I have an issue where navigating to a tab's state via URL will select the first tab along with the correct tab. It should only activate the tab whose state matches the URL route.

Here's what the tabset looks like:

<div style="position:relative">
      <tabset>
        <tab heading="Dashboard" ui-sref="LMS.Dashboard" ui-sref-active="active"></tab>
        <tab heading="Modules" ui-sref="LMS.Modules" ui-sref-active="active"></tab>
        <tab heading="Messages" ui-sref="LMS.Messages" ui-sref-active="active"></tab>
        <tab heading="Settings" ui-sref="LMS.Settings" ui-sref-active="active"></tab>
      </tabset>
      <div ui-view="Dashboard" class="tab-content" ng-show="$state.includes('LMS.Dashboard')">
          <h2>Dashboard</h2>
          {{test}}
      </div>
      <div ui-view="Modules" class="tab-content" ng-show="$state.includes('LMS.Modules')">
          <h2>Modules</h2>
      </div>
      <div ui-view="Messages" class="tab-content" ng-show="$state.includes('LMS.Messages')">
          <h2>Messages</h2>
      </div>
      <div ui-view="Settings" class="tab-content" ng-show="$state.includes('LMS.Settings')">
          <h2>Settings</h2>
      </div>
    </div>

I have a plunker here:

http://plnkr.co/edit/sQB58YKntDwNIUpAdLmT?p=preview

To see the issue, select a tab other than 'Dashboard', then reload the "live view" frame.

Another way is to open it in a window, switch the tab, then reload.

ltfishie · Accepted Answer · 2015-01-04 06:53:38Z

6

I have the same issue. Add active="false" to disable default behavior and use ui-sref-active to add active class.

<tab ui-sref-active="active" active="false">

Edit

While this method seems to works, it produces error because false is not assignable.

Edit 2

Combining ng-init with a local scope variable seems to do the trick.

<tab ui-sref-active="active" active="isActive" ng-init="isActive=false">

In your case, it might be simpler to just add an active variable for each tab. See this plunker: http://plnkr.co/edit/73lm068buZf851h47FVQ?p=preview

edited Jan 4, 2015 at 6:53

answered Jan 4, 2015 at 6:19

ltfishie

2,9857 gold badges45 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

spongessuck Over a year ago

Thanks, @Itfishie. Although it's a bit hacky, your Edit 2 solution works perfectly. Supposedly this is an issue with UI Bootstrap. My tabs are loaded dynamically so adding an active variable for each tab would be messy; I like your method better!

sparkyspider · Accepted Answer · 2015-08-31 21:21:17Z

I had exactly the same thing. After searching for while, I decided the "value" ui-bootstrap offers around tabs is not worth the effort. My simple manual implementation:

    <ul class="nav nav-tabs">
        <li ng-class="{active:$state.current.name == 'properties.edit.basic'}"><a ui-sref="properties.edit.basic">Basic</a></li>
        <li ng-class="{active:$state.current.name == 'properties.edit.marketing'}"><a ui-sref="properties.edit.marketing">Marketing</a></li>
        <li ng-class="{active:$state.current.name == 'properties.edit.rooms'}"><a ui-sref="properties.edit.rooms">Rooms</a></li>
        <li ng-class="{active:$state.current.name == 'properties.edit.images'}"><a ui-sref="properties.edit.images">Images</a></li>
        <li ng-class="{active:$state.current.name == 'properties.edit.rates'}"><a ui-sref="properties.edit.rates">Rates</a></li>
        <li ng-class="{active:$state.current.name == 'properties.edit.availability'}"><a ui-sref="properties.edit.availability">Availability</a></li>
    </ul>
    <ui-view></ui-view>

Collectives™ on Stack Overflow

Trouble with active tab default using AngularJS, UI Boostrap, and UI Router

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related