Angularjs navigation menu with UI-Bootstrap tabs and UI-Router

Question

In this Plunker, I'm unable to make menu links and tabs to work properly. As you can see I need to click twice the 'Route 1' to go back from tabs Route2, moreover when I click twice the 'Route 2' menu link, the tabs content is not rendered.

I think this is the relevant part of the code that matters:

myapp.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise("/");

  $stateProvider
    .state('route1', {
      url: "/",
      templateUrl: "route1.html"
    })
    .state('DocumentoMasterView', {
      url: "/route2",
      templateUrl: "route2.html",
      controller: 'myAppController'
    })
    .state('DocumentoMasterView.A', {
      url: '/detail',
      templateUrl: 'route2.A.view.html',
      controller: 'myAppController'
    })
    .state('DocumentoMasterView.B', {
      url: '/image',
      templateUrl: 'route2.B.view.html',
      controller: 'myAppController'
    })
    .state('DocumentoMasterView.C', {
      url: '/submenu',
      templateUrl: 'route2.C.view.html',
      controller: 'myAppController'
    })

});

 myapp.controller('myAppController',['$scope','$state',function($scope, $state){
        $scope.tabs = [
           { heading: 'A View', route:'DocumentoMasterView.A', active:true},
           { heading: 'B View', route:'DocumentoMasterView.B', active:false },
           { heading: 'C View', route:'DocumentoMasterView.C', 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);
         });
       });

Radim Köhler · Accepted Answer · 2014-09-06 05:48:35Z

3

I've made this change to make that example working (check it here)

we do not need state change in this case

   // instead of this
   $scope.go = function(route){
       $state.go(route);
   };

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

we should handle all the on tab selection

   // use just this
   $scope.go = function(t){
       $scope.tabs.forEach(function(tab) {
           tab.active = $scope.active(t.route);
       });
       $state.go(t.route);
   };

Check it here

Also, try to reconsider using of the <div ng-controller="myAppController"> with ui-router. It could work, but with states you can define all the parts more effectively.

Here I tried to show how to... no ng-controller, parent layout state...

answered Sep 6, 2014 at 5:48

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

4 Comments

Cris69 Over a year ago

@Radim_Köhler this is a big improvement, one last thing: when you click twice on the "Route 2" the tab content disappear.

Radim Köhler Over a year ago

I introduce another feature "redirection" (updated my first plunker), which will always navigate you to the first tab, if the route2 is selected: $urlRouterProvider.when("/route2", "/route2/detail"); hope it helps ;) Enjoy ui-router

Cris69 Over a year ago

This solution still have some issues like clicking twice the same tab it switch to the next tab, and the tabs are not rendered properly. I found a better solution here.

Radim Köhler Over a year ago

Great job Cris. Thanks for feedback. I do appraciate that!

Lewis · Accepted Answer · 2015-04-29 08:09:43Z

1

Radim's answer is great but this is an outdated/ bloated method. ui-router has active states which do all these css and state changing from the view rather than having the logic in your controller.

In your nav:

 <ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="route1">route1</a>
  </li>
</ul>

And thats it! Your currently active state/ view will apply the ui-sref-active="active" class to that li element. where "active" is the class name which is applied.

For your specific nav it would look like this:

<ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="route1">route1</a>
  </li>
    <li ui-sref-active="active" class="item">
    <a href ui-sref="DocumentoMasterView">DocumentoMasterView</a>
  </li>
    <li ui-sref-active="active" class="item">
    <a href ui-sref="DocumentoMasterView.A">DocumentoMasterView.A</a>
  </li>
    <li ui-sref-active="active" class="item">
    <a href ui-sref="DocumentoMasterView.B">DocumentoMasterView.B</a>
  </li>
    <li ui-sref-active="active" class="item">
    <a href ui-sref="DocumentoMasterView.C">DocumentoMasterView.C</a>
  </li>
</ul>

answered Apr 29, 2015 at 8:09

Lewis

6319 silver badges16 bronze badges

1 Comment

ayjay Over a year ago

It would be nice if there was a fiddle or a plunker example, so we can easily see if it works.

Collectives™ on Stack Overflow

Angularjs navigation menu with UI-Bootstrap tabs and UI-Router

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related