Tabs in angularjs not working properly with UI-Router and UI-bootstrap

Question

I'm using a MEAN.js boilerplate, you can find the entire code here.

I tried to add 2 new tabs to the page rendered after one of the articles have been selected from the list. For this task I decided to use both the UI-Router and UI-Bootstrap for Angular.js. The 2 tabs doesn't works properly, I can switch between them and correctly see their content, but occasionally when I go back and select the article list menu item, I get a blank page with the 2 tabs and nothing else.

Here is the changes to the view-article.client.view.html file to include 2 new tabs (the previous content has been copied to the 2 files containing the partial for the new tabs ):

 <div ng-controller="ArticlesController">
   <tabset>
     <tab
            ng-repeat="t in tabs"
            heading="{{t.heading}}"
            select="go(t.route)"
            active="t.active">
     </tab>
   </tabset>
  <div ui-view></div>
 </div>

I've inserted to the article controller these few lines of code:

$scope.tabs = [
       { heading: 'SubA', route:'viewArticle.SubA', active:false },
       { heading: 'SubB', route:'viewArticle.SubB', active:false }

   ];

   $scope.go = function(route){
       $state.go(route);
   };

   $scope.active = function(route){
       return $state.is(route);
   };

   $scope.$on('$stateChangeSuccess', function() {
       $scope.tabs.forEach(function(tab) {
           tab.active = $scope.active(tab.route);
       });
   });

Here's the route.js

'use strict'
angular.module('articles').config(['$stateProvider',
   function($stateProvider) {
    $stateProvider.
    state('listArticles', {
        url: '/articles',
        templateUrl: 'modules/articles/views/list-articles.client.view.html'
    }).
    state('createArticle', {
        url: '/articles/create',
        templateUrl: 'modules/articles/views/create-article.client.view.html'
    }).
    state('viewArticle', {
        url: '/articles/:articleId',
        templateUrl: 'modules/articles/views/view-article.client.view.html'
    }).
    state('editArticle', {
        url: '/articles/:articleId/edit',
        templateUrl: 'modules/articles/views/edit-article.client.view.html'
    }).
    state('viewArticle.SubA', {
        url: '/SubA',
        templateUrl: 'modules/articles/views/view-article.client.view.SubA.html'
    }).

    state('viewArticle.SubB', {
        url: '/SubB',
        templateUrl: 'modules/articles/views/view-article.client.view.SubB.html'
    });
   }
]);

@ChrisT I forked a mean.js version on github with my additions here's the [link](https://github.com/smartcris/meantabs) — Cris69, Jul 31 '14 at 20:45
@ChrisT [here](http://plnkr.co/edit/14KZebZ82KC4ocs7nEFn?p=preview) is the plunk — Cris69, Sep 05 '14 at 14:18

score 10 · Accepted Answer · answered Sep 09 '14 at 16:03

10

This has something to do with angular-ui bootstrap tab directive, and the select() callback. It appears that the select() callback in tab2 is being called when navigating away from tab2.

I changed:

`<tab  ng-repeat="t in tabs"  heading="{{t.heading}}" select="go(t.route)" active="t.active"> `</tab>

to:

`<tab  ng-repeat="t in tabs"  heading="{{t.heading}}"  ui-sref="{{t.route}}" active="t.active"> </tab>`

and your demo works now.

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

answered Sep 09 '14 at 16:03

Chris T

8,186
2
29
39

I had the same problem with v.0.11.2 but in 0.12 it works fine with the select. – Elisabeth Jan 28 '15 at 12:14
running angular 1.3.2 and angular-ui-router 0.2.13 and angular-bootstrap with tabs the above hint does remove a buggy behavior indeed, thanks Chris BUT it also breaks a working behavior when I have an abstract state with 2 child states. Initially when the site is loaded the first tab is never activated but that happened with the old select function! – Pascal Jan 29 '15 at 20:43
I correct: "Initially when the site is loaded the first tab is never activated/selected thus no state is changed and so no child state is activated but that happened NOT with the old select function!" – Pascal Jan 29 '15 at 20:55
Chris if you read this please have a look I made a repro now: https://stackoverflow.com/questions/28387547/bootstrap-tabs-does-not-work-with-angular-ui-router – Pascal Feb 07 '15 at 21:27

score 1 · Answer 2 · answered Nov 06 '15 at 14:52

1

I had the same problem with ui-boostrap v0.11.2, i changed to v0.12.0 and it worked!

answered Nov 06 '15 at 14:52

Luiz Henrique Guimaraes

107
4
4

Tabs in angularjs not working properly with UI-Router and UI-bootstrap

2 Answers2

Linked