6

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'
    });
   }
]);
4
  • can you put this code into a plunk? Commented Jul 30, 2014 at 18:13
  • @ChrisT I forked a mean.js version on github with my additions here's the link Commented Jul 31, 2014 at 20:45
  • can you create a minimal test case and put it in a plunk? Commented Aug 1, 2014 at 0:34
  • @ChrisT here is the plunk Commented Sep 5, 2014 at 14:18

2 Answers 2

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

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

4 Comments

I had the same problem with v.0.11.2 but in 0.12 it works fine with the select.
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!
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!"
Chris if you read this please have a look I made a repro now: stackoverflow.com/questions/28387547/…
1

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.