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

Question

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

Answer 1

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

ui-sref-active="active" maintenant, définit 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 818

Une solution de contournement générale les gens sont suggère, c'est:

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

Answer 2

Vous avez une mauvaise compréhension de l'UI-Sref-actif="actif"

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

Cela montrera que CSS spécial ne mettra en surbrillance que lorsque vous êtes dans la route d'état1 (référence https://github.com/angular-ui/u-router/wiki/quick-reference#wiki-ui-sref-active ). C'est le cas lorsque vous cliquez sur la route 1. Mais lorsque vous cliquez sur "Afficher la liste", vous n'êtes plus en route1. Plutôt, vous êtes dans l'état "Route1.List". Vous pouvez vérifier cela en écrivant le code suivant. Ceci est strictement pour comprendre le fonctionnement de l'état.

js

Contrôleur intérieur

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

Inside HTML

{{currentState}}

Si vous regardez de près la documentation de l'UI-Sref-actif, il regarde non seulement la statename, mais aussi les statistiques, donc lorsque vous allez le remplacer, cela ne change plus de CSS. À partir du Sourcecode, 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, rappelez-vous que les variables de portée sont héritées de vues imbriquées.

Contrôleur intérieur de la route.

$scope.route1Active = true;

en HTML

<li ng-class={active:route1Active}><a ui-sref="route1">Route 1</a></li>

Answer 3

Le routeur d'interface utilisateur angulaire soutient désormais cela de manière native.Voir Engagez https://github.com/angular-ui/u-router/commit/ BF163AD6CE176CE28792696C8302D7CDF5C05A01

Answer 4

Ma solution était de définir:

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

L'état a déjà été ajouté auparavant à la portée du contrôleur:

$scope.state = $state;

Answer 5

Vous n'avez rien à faire dans les contrôleurs.Voici mon exemple de code:

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

dans la configuration de l'itinéraire:

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

Answer 6

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

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

ci-dessous est le fichier d'état

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

Answer 7

Nous avons déjà une solution sans aucun "hack" ici

C'est la façon de 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 configuration de routeur 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"
})

Answer 8

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

Answer 9

J'espère que c'est ce que vous avez recherché.Place l'URL parent dans la classe de liste, maintenant chaque fois que vous accédez à la classe des parents de la classe enfant sera actif

Étape 1: Ajoutez un contrôleur pour votre barre NAV ORIN Votre contrôleur existant dans lequel la barre de navigation est incluse, ajoutez le suivant

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

}]);

Step2: Dans votre barre de navigation

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

c'est ça.