Angulaire de l'INTERFACE utilisateur du Routeur: Comment puis-je obtenir de la vue parente à être “actif” lors de la navigation d'affichage imbriqué?

Je suis en train de travailler sur un projet qui a mis en œuvre l'INTERFACE utilisateur du routeur et c'est à l'aide de ui-sref-active="active" pour ajouter la classe active le menu de navigation élément lorsque celui-ci est l'itinéraire actuel. Toutefois, lorsque vous accédez à un affichage imbriqué à l'intérieur de ce point de vue, le parent de l'élément de menu n'est plus actif. Voir la suite Plunker:

http://plnkr.co/edit/2CoEdS?p=preview

Par défaut (ou si vous cliquez sur ce Parcours de 1 est "actif". Lorsque vous cliquez sur "Afficher la Liste", vous verrez que la Route 1 n'est plus actif.

Edit:

La seule différence entre cet exemple et bien mon projet, c'est que le menu de navigation dans mon projet dispose de son propre contrôleur et ainsi de ne pas utiliser le même champ d'application que le contrôleur pour "route1".

  • Cette question est de 2 ans, il y a beaucoup de réponses, et de l'API a radicalement changé depuis que j'ai posté, donc s'il vous plaît, ne perdez pas votre temps.
InformationsquelleAutor Ian Walter | 2014-02-26
  1. 60

    MODIFIER Pour la mise à jour de l'interface utilisateur-routeur 0.2.13:

    ui-sref-active="active" fixe désormais le "actif" de la classe lors de l'état actuel de l'interface utilisateur-sref de l'état ou tout enfant

    ui-sref-active-eq="active" se comporte comme les précédentes itérations de l'interface utilisateur-sref-active, et que les ensembles de la classe pour l'état exact

    Réponse Originale À Cette Question:

    Voir ouvrir l'interface utilisateur du routeur questions:
    https://github.com/angular-ui/ui-router/issues/704 et Huit cent dix huit

    Une solution de contournement générale les gens sont suggérant:

    ng-class="{active:$state.includes('route1')}"

    Bien sûr, $etat doit être ajouté à $champ d'application. Voir mise à jour plunk: http://plnkr.co/edit/KHLDJP?p=preview

    • github.com/angular-ui/ui-router/pull/927 a été fusionné à maîtriser. Apparemment, ce n'est pas le faire dans le 0.2.10 communiqué, mais il devrait être disponible dans la prochaine version, probablement 0.2.11.
    • l'interface utilisateur du routeur prend désormais en charge ce mode natif: github.com/angular-ui/ui-router/commit/...
    • Vous pouvez également l'utiliser comme un filtre comme ceci: ng-class="{active: ('route1' | includedByState)}" qui se traduit par ng-class="{active:$state.includes('route1')}"
    • Bien sûr, si les choses deviennent vraiment difficiles, vous pouvez toujours explicitement à la route comme ceci: ng-class="{active:$state.current.name == 'myRoute'}"
    InformationsquelleAutor Chris T
  2. 8

    Vous avez une mauvaise compréhension de l'interface utilisateur-sref-active="active"

    <li ui-sref-active="active"><a ui-sref="route1">Route 1</a></li>

    Cela permettra de montrer css spéciale soulignant que lorsque vous êtes en état de route1 (référence https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-ui-sref-active). C'est le cas lorsque vous cliquez sur sur la route 1. Mais lorsque vous cliquez sur "Afficher la liste" vous n'êtes plus en route1.
    Plutôt que vous êtes dans l'état "route1.la liste" . Vous pouvez vérifier cela en écrivant le code suivant. C'est strictement pour comprendre comment l'etat.

    js

    à l'intérieur du contrôleur de

    $rootScope.currentState = $state.$current.name //using rootScope so that you can access the variable anywhere inside html

    à l'intérieur du html

    {{currentState}}

    Si vous regardez de près à la documentation de l'interface utilisateur-sref-actif, non seulement il ressemble à stateName mais aussi stateParams, donc quand vous allez à la sous-état, il ne change plus de css. À partir du code source, il devient plus clair.

     function update() {
        if ($state.$current.self === state && matchesParams()) {
          $element.addClass(activeClass);
        } else {
          $element.removeClass(activeClass);
        }//route1===route1.list will not be true.

    pour résoudre le problème, n'oubliez pas la portée des variables sont hérités de vues imbriquées.

    à l'intérieur de contrôleur de route.

    $scope.route1Active = true;

    en html

    <li ng-class={active:route1Active}><a ui-sref="route1">Route 1</a></li>
    • Je comprends comment l'interface utilisateur-sref-active="active" des œuvres. Je suis simplement à la recherche de solutions à ce que je vois comme un problème commun qui ui-sref-active n'a pas d'adresse. Merci, ta solution fonctionne, mais pas avec mes projets de jeu particulier (voir modifier ci-dessus). Aussi, je préfère ne pas ajouter à $rootScope si quelque chose peut être une meilleure portée ailleurs.
    • je pense que vous pouvez le déposer comme un problème angulaire de l'interface utilisateur du routeur de l'équipe et de voir comment il va
    InformationsquelleAutor himangshuj
  3. 5

    Angulaire de l'INTERFACE utilisateur du routeur prend désormais en charge ce mode natif. Voir commettre https://github.com/angular-ui/ui-router/commit/bf163ad6ce176ce28792696c8302d7cdf5c05a01

    InformationsquelleAutor Kenneth Lynne
  4. 4

    Ma solution a été de définir:

    <li ng-class="{ 'active': state.current.name.indexOf('route1') != -1 }">

    L'état a déjà été ajouté à la manette de la portée de l': 

    $scope.state = $state;
    • Ne pas réinventer la roue. C'est officiel: ng-classe="{active:$état.comprend('route1')}"
    • $state.includes ne fonctionne pas pour les vues imbriquées. Il l'habitude de travailler pour route1.nested.
    InformationsquelleAutor Ian Walter
  5. 2

    Vous n'avez pas besoin de faire quelque chose dans les contrôleurs. Voici mon code d'exemple:

        <ul class="nav nav-pills nav-stacked" role="tablist">
        <li ui-sref-active="active"><a ui-sref="Booking.Step1" href="#/Booking/Step1">Step1</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step2" href="#/Booking/Step2" >Step2</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step3" href="#/Booking/Step3">Step3</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step4" href="#/Booking/Step4">Step4</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step5" href="#/Booking/Step5">Step5</a></li>
    </ul>

    En route configuration:

    $stateProvider.state('Booking', {
        abstract: true,
        url: '/Booking',
        templateUrl: "TourApp/Templates/Booking/SideMenu.html",
        controller: "SideMenuController"
    });

    $stateProvider.state('Booking.Step1', {
        url: "/Step1",
        views: {
            'content': {
                templateUrl: "TourApp/Templates/Booking/Step1.html",
                controller: "Step1Controller"
            }
        }
    });

    $stateProvider.state('Booking.Step2', {
        url: "/Step2",
        views: {
            'content': {
                templateUrl: "TourApp/Templates/Booking/Step2.html",
                controller: "Step2Controller"
            }
        }
    });
    InformationsquelleAutor Yang Zhang
  6. 2

    Maintenant, ils ont mis à jour et la nouvelle façon de faire qui est

     <a ui-sref-active="{'active': 'main.app.manage.**'}" ui-sref="main.app.manage.people.list"></a>

    Ci-dessous le fichier d'état de l'

     angular.module('manage.people', ['people.invite'])
  .config(['$stateProvider', function($stateProvider) {
    $stateProvider
      .state('main.app.manage.people', {
        url: '/people',
        abstract: true,
        cache: false,
        views: {
          'tabContent': {
            template: '<div ui-view="peopleContent"></div>',
            controller: 'peopleController'
          }
        }
      })
      .state('main.app.manage.people.list', {
        url: '/list',
        views: {
          'peopleContent': {
            templateUrl: '/internal/main/app/manage/people/views/people.html',
            controller: 'peopleListController'
          }
        }
      });
    InformationsquelleAutor Siddharth Pandey
  7. 1

    Nous avons déjà une solution sans "hack" ICI

    C'est la façon de le faire:

    HTML >

     <li ui-sref-active="active" >
   <a href="#" class="submenu" ui-sref="bands">
       <i class="fa fa-location-arrow" aria-hidden="true"></i>
                     Bands
           <span class="fa fa-chevron-down"></span>
   </a>

   <ul class="nav child_menu">
        <li ui-sref-active="active">
            <a  ui-sref="bands.nirvana">
                 Nirvana   
            </a>
       </li>
       <li ui-sref-active="active">
            <a  ui-sref="bands.iron">
                Iron
            </a>
       </li>
       <li ui-sref-active="active">
            <a  ui-sref="bands.metalica">
                Metalica
            </a>
       </li>           
  </ul>

    Notre routeur configuration sera comme ceci >

    $stateProvider.state('bands', {
    abstract: true,
    url: '/bands',
    templateUrl: "myapp/categories/template.bands.html", //<ui-view></ui-view> 
    controller: "SomeController as vm"
}).state('bands.nirvana', {
    url: '/nirvana',
    templateUrl: "myapp/categories/band.nirvana.html",
    controller: "SomeController as vm"
}).state('bands.iron', {
    url: '/iron',
    templateUrl: "myapp/categories/band.iron.html",
    controller: "SomeController as vm"
}).state('bands.meatlica', {
    url: '/metalica',
    templateUrl: "myapp/categories/band.metalica.html",
    controller: "SomeController as vm"
})
    • enfin, il fonctionne, et c'est génial! Mais quand je clique sur le lien pour ouvrir le sous-menu, j'obtiens l'erreur: Erreur: Impossible de transition vers l'abstrait de l'état "bandes" (...)"
    InformationsquelleAutor davidwillianx
  8. 1

    Je suis venu ici 2 ans plus tard, la question a été posée mais angular-ui-router a beaucoup de maîtrise de l'approche dans la résolution de ce problème. Il a travaillé pour imbriquée des états-unis.

    <ul>
  <li ui-sref-active="active" class="item">
    <a ui-sref="home">Home</a>
  </li>
  <!-- ... -->
</ul>

    Lors de l'application accède à home de l'état, c'est comment le HTML résultant apparaît :

    <ul>
  <li ui-sref-active="active" class="item active">
    <a ui-sref="home">Home</a>
  </li>
  <!-- ... -->
</ul>

    ui-sref-actif de référence rapide :

    Une directive de travailler aux côtés de l'interface utilisateur-sref à ajouter des classes à un élément
    lorsque l'interface utilisateur-sref directive de l'état est actif, et la suppression de
    lorsqu'il est inactif. Le principal cas d'utilisation est de simplifier la
    spécial apparence des menus de navigation en s'appuyant sur l'interface utilisateur-sref, en ayant
    l'état "actif" du bouton de menu apparaissent différentes, ce qui le distingue
    de l'inactivité des éléments de menu.

    Une documentation complète.

    InformationsquelleAutor BeingSuman
  9. 0

    J'espère que c'est ce que vous avez été recherchez.Placez le parent url dans la liste de classe ,maintenant, chaque fois que vous accédez à des enfants de classe de classe parent sera actif

    Étape 1: Ajouter un Contrôleur pour votre barre de navigation orin votre contrôleur existant où la barre de navigation est inclus ajouter le suivant

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

}]);

    Etape 2: Dans votre barre de navigation

    <li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>

    C'est tout.

    InformationsquelleAutor