Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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'
    });
   }
]);
like image 634
Cris69 Avatar asked Jul 29 '14 14:07

Cris69


People also ask

How to make a tab using angular UI bootstrap?

Angular UI Bootstrap is an Angular JS framework created by Angular UI developers for providing better UI which can be used easily. First, add Angular UI bootstrap scripts needed for your project. Make tab with its UIBootStrap classes which will set the UI look for the tab.

What is the angular router?

The Angular Router enables navigation from one view to the next as users perform application tasks. This guide will cover the router's primary features, illustrating them throught the Smart Tabs Component. The Angular project will contain one Tabs component with two Tab Items.

What is a tab component in angular?

The Angular project will contain one Tabs component with two Tab Items. Each of them will have a router-outlet that will be used to visualize the different components for each Tab.

What is the difference between Bootstrap and Ng bootstrap?

Bootstrap provides the facility of Ng Bootstrap. All the native angular directives of Bootstrap version 3 and 4 will be provided by the Ng Bootstrap, such as datepicker, tooltip, buttons, model, tabs, pagination, etc. We can easily use Bootstrap UI by using the Ng Bootstrap.


1 Answers

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

like image 145
Chris T Avatar answered Sep 29 '22 03:09

Chris T