web-dev-qa-db-fra.com

Angular-ui-router: états ui-sref-active et imbriqué

J'utilise angular-ui-router et les états imbriqués 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 dans, disons Products / Categories Je voudrais que Products (au niveau 1) et Categories (au niveau 2) soient mis en évidence. Cependant, en utilisant ui-sref-active, si je suis dans l'état Products.Categories, seul cet état est mis en surbrillance, pas Products.

Existe-t-il un moyen de mettre Products en surbrillance dans cet état?

angularjsangular-ui-router
76
paj28

Au lieu de cela-

<li ui-sref-active="active">
    <a ui-sref="posts.details">Posts</a>
</li>

Tu peux le faire-

<li ng-class="{active: $state.includes('posts')}">
    <a ui-sref="posts.details">Posts</a>
</li>

Actuellement ça ne marche pas. Une discussion est en cours ici ( https://github.com/angular-ui/ui-router/pull/927 ) et elle sera bientôt ajoutée.

METTRE À JOUR:

Pour que cela fonctionne, $state doit ê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 immédiatement. Veuillez vérifier le numéro associé: https://github.com/angular-ui/ui-router/issues/818

131
Rifat

Voici une option pour imbriquer plusieurs états non liés hiérarchiquement et pour lesquels vous n'avez pas de contrôleur 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.

<a ui-sref="production.products" ng-class="{active: ('production.products' | 
includedByState) || ('planning.products' | includedByState) || 
('production.categories' | includedByState) || 
('planning.categories' | includedByState)}">
  Items
</a>

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 .

27
Donutself

Voici la solution:

<li class="myNonActiveStyle" ui-sref-active="myActiveStyle">
     <a ui-sref="project.details">Details</a>
</li>

Modifier:

Ce qui précède ne fonctionne que pour le chemin d’itinéraire exact et n’appliquera pas le style actif aux itinéraires imbriqués. Cette solution devrait fonctionner pour cela:

<a data-ui-sref="root.parent" data-ng-class="{ active: $state.includes('root.parent') }">Link</a>
17
Holland Risley

So 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 les éléments suivants

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

}]);

Étape 2: dans votre barre de navigation

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

C'est tout.

2
user6664928

Routeur UI. Extrait de code pour rendre votre barre de navigation active. 

HTML

<li ui-sref-active="is-active" ui-nested><a ui-sref="course">Courses</a>
</li> <li ui-sref-active="is-active" ui-nested><a ui-sref="blog">blog</a></li>

CSS

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

Inside courseView.HTML

<button type="button" ui-sref="blog" class="btn btn-primary">Next</button>

Ce bouton est présent dans le cours View qui vous permet de naviguer vers le prochain blog View. et met votre barre de navigation en surbrillance.

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

0
vineet sagar

Mon code est passé de/productGroups à/productPartitions, qui est le seul moyen d'accéder à la vue "productPartitions". 

J'ai donc ajouté une ancre masquée avec ui-sref également défini sur "productPartitions" dans le même élément de liste contenant ui-sref-active.

<li ui-sref-active="active">
     <a ui-sref="productGroups">
     <i class="fa fa-magic"></i> Product groups </a>
     <a ui-sref="productPartitions" style="display:none;"></a>
</li>

Maintenant, le bouton de navigation productGroups reste actif lorsque vous accédez à l'une ou l'autre des vues.

0
C Rudolph

Voici ce que j'ai fait pour atteindre le même objectif. L'état parent est "app.message" et ne déclare pas comme abstrait.

Les états enfants sont "app.message.draft", "app.message.all", "app.message.sent".

Mon lien de navigation -

<a ui-sref-active="active-menu" ui-sref="app.message">Messages</a>

Définissez les itinéraires/liens de vos enfants.

et mettre à jour en configuration

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
                if (toState.name === 'app.message') {
                    event.preventDefault();
                    $state.go('app.message.draft');
                    return;
                }
            });
0
Aditya Gupta