Syntaxe
<element ng-show="expression"></element>
|
Paramètres
| Nom |
Description |
| element |
Ce paramètre permet d'indiquer une balise. |
| expression |
Ce paramètre permet d'indiquer une expression montrant l'élément uniquement si l'expression vaut true. |
Description
Cette directive permet d'indiquer qu'il faut afficher l'élément spécifié.
Remarques
- Fonctionnalité de base : La directive ng-show permet de contrôler dynamiquement la visibilité d'un élément HTML en fonction d'une expression
Angular. Si l'expression est évaluée à true, l'élément est visible. Sinon, il est masqué en appliquant la classe CSS ng-hide réglant display: none.
- Différence avec ng-if : Contrairement à ng-if, ajoutant ou supprimant l'élément du DOM,
ng-show garde l'élément dans le DOM mais modifie seulement son style pour le masquer. Cela peut être utile si vous voulez
préserver l'état interne de l'élément, comme des valeurs de formulaire ou des événements.
- Performance : Comme ng-show ne supprime pas l'élément du DOM, il est généralement plus rapide que
ng-if pour afficher ou masquer des éléments, surtout lorsqu'il y a des opérations coûteuses associées à la création ou la suppression de contenu. Cependant, les éléments
masqués restent actifs, ce qui peut avoir un impact sur les performances si leur comportement (comme des écouteurs d'événements) est complexe.
- Expression dynamique : L'expression associée à ng-show peut être aussi simple qu'un booléen ou aussi complexe qu'une fonction logique. Par exemple :
<div ng-show="user.isLoggedIn && user.hasAccess">Bienvenue !</div> permet de conditionner l'affichage d'un élément à plusieurs critères.
- Classes CSS associées : AngularJS utilise une classe CSS par défaut, ng-hide, pour masquer les éléments. Vous pouvez personnaliser le
style de cette classe si nécessaire, en la redéfinissant dans votre fichier CSS. Cela permet d'adapter l'apparence ou le comportement des éléments masqués.
- Combinaison avec ng-hide : ng-show peut être utilisé conjointement avec ng-hide, mais il est important de noter qu'ils sont inverses l'un de
l'autre. Par exemple, si ng-show="isVisible" et ng-hide="isVisible" sont appliqués sur le même élément, le résultat peut devenir imprévisible et doit être évité.
- Gestion des animations : La directive ng-show prend en charge les animations AngularJS via le module ngAnimate. Vous pouvez définir des
animations spécifiques pour les transitions entre l'état visible et masqué en utilisant des classes comme .ng-hide-add et .ng-hide-remove.
- Accessibilité : Bien que ng-show masque visuellement les éléments, ceux-ci restent présents dans le DOM et
accessibles pour les technologies d'assistance comme les lecteurs d'écran. Si vous devez complètement retirer un élément pour des raisons d'accessibilité, il est préférable
d'utiliser ng-if à la place.
Dernière mise à jour : Dimanche, le 9 décembre 2018
