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

4
votes

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.

2
angularjsangular-ui-bootstrapangular-ui-router

2 Answers

6
votes

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

2
votes

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>