current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

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);
         });
       });
share|improve this question

1 Answer 1

up vote 1 down vote accepted

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...

share|improve this answer
    
@Radim_Köhler this is a big improvement, one last thing: when you click twice on the "Route 2" the tab content disappear. –  Cris69 Sep 6 at 7:58
1  
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 –  Radim Köhler Sep 6 at 10:28
    
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. –  Cris69 Sep 11 at 8:32
    
Great job Cris. Thanks for feedback. I do appraciate that! –  Radim Köhler Sep 11 at 8:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.