web-dev-qa-db-fra.com

AngularJS: ng-show vs display: none

J'ai eu un cas d'utilisation par lequel je dois garder un élément HTML caché par défaut en utilisant CSS comme suit:

HTML:

<div class="item">
</div>

CSS:

.item {
    display: none;
}

Cependant, je dois activer/désactiver la visibilité de l'élément à l'aide de ng-show après le chargement de la page, comme suit:

<div class="item" ng-show="show_element">
</div>

Cependant, même si $scope.show_element est défini sur true, l'élément ne devient pas visible, c'est-à-dire que la propriété css annule la représentation de AngularJS. Existe-t-il un moyen de donner plus de priorité à ng-show? 

Aussi, vous pouvez penser que je peux garder $scope.show_element comme faux au début pour le cacher. Mais dans ce cas, j’aperçois très brièvement l’élément lors du chargement de la page, ce qui n’est pas bon du point de vue de l’expérience UX.

javascriptcssangularjsng-show
10
Tarun Dugar

Une façon de le faire fonctionner dans votre cas serait d'utiliser ng-class où dans le cas où l'élément devrait être visible, vous pouvez appliquer la classe à la propriété d'affichage correcte, c.-à-d. display: block et si vous souffrez d'un démarrage lent, vous pouvez utiliser la documentation ng-cloak ici https: //docs.angularjs.org/api/ng/directive/ngCloak

5
maurycy

Une autre alternative simple 

style="{{show_element?'display:block !important':'display:none !important'}}"
4
shreedhar bhat

Si vous essayez simplement de masquer l'élément de manière à ne pas avoir de mémoire flash au chargement, au lieu d'utiliser la classe .item définie sur display:none, vous pouvez simplement définir une classe de .ng-hide sur l'élément avec ng-show activé.

La directive AngularJS ng-show consiste à ajouter ou à supprimer une classe de .ng-hide à l'élément DOM. La classe .ng-hide applique la règle display: none !important;

<div class="ng-hide" ng-show="showElement">...</div>
0
lemmingworks