AngularJs: Cacher l'élément navbar basé sur la route?
Je suis à essayer de comprendre comment afficher ou masquer un élément dans ma barre de navigation en fonction de la voie, ou la vue actuelle affichée. Par exemple, j'ai un basic/advanced bouton à bascule que j'ai mis dans la barre de navigation (Bootstrap 3) lorsque l'utilisateur est sur le formulaire de recherche. Mais quand ils sont partout ailleurs dans l'application que le bouton à bascule doit être caché.
En termes de DOM, c'est juste un élément de liste qui établit la valeur liquidative. Je ne suis pas sûr si je devrais l'afficher ou masquer en fonction d'une valeur globale qui est indiqué sur chaque vue, ou si je peux utiliser la route ou le nom de la vue. Si oui, comment cela pourrait fonctionner?
Merci!
source d'informationauteur Eddie
Vous devez vous connecter pour publier un commentaire.
Une solution est de construire une fonction dans le contrôleur est responsable de la barre de navigation qui pourraient être interrogé pour déterminer si l'élément doit être affiché:
(Le code ci-dessus utilise Angulaire du $lieu service)
Ensuite dans le modèle, vous pouvez afficher/masquer sur la base du résultat de l'appel (passage de la route qui devrait basculer l'affichage de l'élément):
Voici la démarche que j'ai eu avec l'interface utilisateur du routeur:
Je ne veux masquer la barre de navigation pour un petit nombre de pages, donc je suis allé avec un opt-out de la propriété de l'état(s) que je veux cacher la barre de navigation.
Injecter
$state
dans votre barre de navigation du contrôleur et de l'exposer au modèle:Puis ajouter
ng-hide
à votre barre de navigation modèle: