Tab for current route not set to active using Bootstrap.UI 1.2.4

[mjbeswick]

The latest version of Bootstrap.UI 1.2.4 breaks the functionality setting the tab matching the current route. Works with previous version Bootstrap.UI 1.2.

I have stepped though the ui-router-tabs.js, and isAncestorOfCurrentRoute is being set to true for the correct tab, although when the page finishes loading, the first tab is always set to active.

[rpocklin]

Yep, looks like there's a bit of work to do with this new version of Bootstrap.UI.

[ulejon]

Having the same issue, using Bootstrap UI 1.2.1. Any idea when this can be fixed?

[primavera133]

I have the same issue with Bootstrap UI 1.2.2. It seems Bootstrap UI moved the active-attribute to the uib-tabset element, and the value of it should be the active tab index.

[primavera133]

Close to presenting a fix now but it breaks the tests for $stateChangeStart cancel that still routes. Cannot see why my code would break that, so it's probably something with the UI-update. No more time to spend on it at the moment, though... :/ ui-router-tabs.js.zip

[rpocklin]

Can't do much with a zip, presenting a branch from your repo (forked from this) would have been a better way to go.

[primavera133]

Yeah, sorry about that. Will see if I can get some time to do this better.

[rpocklin]

Please test out using the master branch, if it's all good I will release it.

[dcheney]

As Bootstrap UI moved the active attribute to the uib-tabset element (thanks primavera133!), a patch to ui-router-tabs.js that works for me is:

        $scope.update_tabs = function() {
          // sets which tab is active (used for highlighting)
          angular.forEach($scope.tabs, function(tab, index) {         // include index
            tab.params = tab.params || {};
            tab.options = tab.options || {};
            tab.active = $scope.active(tab);
            if ($scope.active(tab)) { $scope.tabs.active = index; }   // record index
          });
        };

and then use 'active=tabs.active' in the template:

    var DEFAULT_TEMPLATE = '<div><uib-tabset class="tab-container" type="{{type}}" vertical="{{vertical}}" active=tabs.active ' +
      'justified="{{justified}}">' + '<uib-tab class="tab" ng-repeat="tab in tabs" heading="{{tab.heading}}" ' +
      'active="tab.active" disable="tab.disable" ng-click="go(tab)">' +
      '</uib-tab></uib-tabset></div>';

[rpocklin]

Thanks for the suggestion, am working to release a new version this week.

[rpocklin]

Released v2.0.0, feel free to raise any issues against it.