Menu de navigation Angularjs avec onglets UI-Bootstrap et UI-Router

Dans ce Plunker , je ne peux pas faire fonctionner correctement les liens de menu et les onglets. Comme vous pouvez le voir, je dois cliquer deux fois sur la «Route 1» pour revenir des onglets Route2, de plus, lorsque je clique deux fois sur le lien de menu «Route 2», le contenu des onglets n'est pas rendu.

Je pense que c'est la partie pertinente du code qui compte:

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); }); });

J'ai fait ce changement pour faire fonctionner cet exemple (vérifiez-le ici )

Nous n'avons pas besoin de changement d'état dans ce cas

  // 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); }); });

Nous devrions gérer tous les choix de l'onglet

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

Vérifiez ici

Essayez également de reconsidérer l'utilisation du <div ng-controller="myAppController"> avec ui-router. Cela pourrait fonctionner, mais avec les états, vous pouvez définir toutes les pièces plus efficacement.

Ici, j'ai essayé de montrer comment … sans ng-controller, état de la mise en page parent …

La réponse de Radim est excellente, mais c'est une méthode obsolète / bloquée. Ui-router a des états actifs qui font tous ces css et l'état de changer de la vue plutôt que d'avoir la logique dans votre contrôleur.

Dans votre nav:

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

Et c'est tout! Votre état / vue actuellement actif appliquera la classe ui-sref-active = "active" à cet élément li. Où "actif" est le nom de classe qui est appliqué.

Pour votre navigation spécifique, cela ressemblerait à ceci:

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