Angular-ui-router: états actifs et nesteds

J’utilise des états angular-ui-router dans mon application et j’ai également une barre de navigation. La barre de navigation est écrite à la main et utilise ui-sref-active pour mettre en évidence l’état actuel. C’est une barre de navigation à deux niveaux.

Maintenant, quand je suis, dites Products / Categories je souhaite que les deux Products (niveau 1) et les Categories (niveau 2) soient mis en évidence. Cependant, en utilisant ui-sref-active , si je suis dans l’état Products.Categories alors seul cet état est mis en évidence, pas les Products .

Y a-t-il un moyen de mettre les Products évidence dans cet état?

Au lieu de cela-

 
  • Posts
  • Tu peux le faire-

     
  • Posts

  • Actuellement, cela ne fonctionne pas. Il y a une discussion en cours ici ( https://github.com/angular-ui/ui-router/pull/927 ) Et, il sera bientôt ajouté.

    METTRE À JOUR:

    Pour que cela fonctionne, $state devrait être disponible dans la vue.

     angular.module('xyz').controller('AbcController', ['$scope', '$state', function($scope, $state) { $scope.$state = $state; }]); 

    Plus d’informations

    UPDATE [2]:

    À partir de la version 0.2.11 , cela fonctionne 0.2.11 . S’il vous plaît vérifier le problème lié: https://github.com/angular-ui/ui-router/issues/818

    Voici une option pour l’imbrication de plusieurs états non liés hiérarchiquement et pour lesquels aucun contrôleur n’est disponible pour la vue. Vous pouvez utiliser le filtre UI-Router includedByState pour vérifier votre état actuel par rapport à un nombre quelconque d’états nommés.

      Items  

    TL; DR: plusieurs états nommés non liés doivent appliquer une classe active sur le même lien et vous n’avez pas de contrôleur? Utilisez includedByState .

    Ceci est la solution:

     
  • Details
  • Modifier:

    Ce qui précède ne fonctionne que pour le chemin d’access exact et n’applique pas le fichier activeStyle aux routes nestedes. Cette solution devrait fonctionner pour cela:

     Link 

    Disons que l’arborescence d’URL est la suivante:

    app (for home page) -> app.products -> app.products.category

    l’usage:

     
  • Products
  • Maintenant, lorsque vous appuyez sur les products : seuls les produits seront actifs.

    si vous appuyez sur la category : les deux produits et la catégorie seront actifs.

    Si vous voulez que la catégorie soit active uniquement si vous appuyez dessus, vous devez utiliser: ui-sref-active-eq sur les produits, ce qui signifie que seul ce sera actif et non ses enfants.

    la bonne utilisation dans app.js:

     angular.module('confusionApp', ['ui.router']) .config(function($stateProvider, $urlRouterProvider) { $stateProvider // route for the home page .state('app', { url:'/', views: { ... } }) // route for the aboutus page .state('app.products', { url:'products', views: { ... } }) // route for the contactus page .state('app.products.category', { url:'category', views: { ... } }) $urlRouterProvider.otherwise('/'); }); 

    Si simple, Étape 1: Ajoutez un contrôleur pour votre barre de navigation ou dans votre contrôleur existant, où la barre de navigation est incluse, ajoutez ce qui suit

     app.controller('navCtrl', ['$scope', '$location', function($scope, $location) { $scope.isActive = function(destination) { return destination === $location.path(); } }]); 

    Étape 2: Dans votre barre de navigation

     
  • Browse Journal
  • C’est tout.

    Routeur d’interface utilisateur Extrait de code pour rendre votre barre de navigation active.

    HTML

     
  • Courses
  • blog
  • CSS

     is-active{ background-color: rgb(28,153,218); } 

    À l’intérieur de courseView.HTML

      

    Ce bouton est présent dans la vue de parcours qui vous permet d’accéder à la vue suivante, à savoir le blog. et met en évidence votre barre de navigation.

    Trouvez un exemple similaire, une application de routeur ui angular de démonstration: https://github.com/vineetsagar7/Angualr-UI-Router

    Mon code a navigué de / productGroups vers / productPartitions, qui est le seul moyen d’accéder à la vue “productPartitions”.

    J’ai donc ajouté une ancre cachée avec ui-sref également à “productPartitions” dans le même élément de liste qui a ui-sref-active

     
  • Product groups
  • Maintenant, le bouton de navigation productGroups rest actif lors de l’access à l’une des vues