quelle est la différence entre ng-si et ng-show/ng-hide

Question

J'essaie de comprendre la différence entre ng-if et ng-show/ng-hide, mais ils regardent la même chose pour moi.

Est-il une différence que je devrais garder à l'esprit de choisir d'utiliser l'un ou l'autre ?

Answer 1

ngIf

L' ngIf directive supprime ou recrée une partie de l'arborescence DOM, basée sur une expression. Si l'expression attribuée à ngIf donne une valeur fausse alors l'élément est retiré de la DOM, sinon un clone de l'élément est réinséré dans le DOM.

<!-- when $scope.myValue is truthy (element is restored) -->
<div ng-if="1"></div>

<!-- when $scope.myValue is falsy (element is removed) -->
<div ng-if="0"></div>

Lorsqu'un élément est supprimé à l'aide d' ngIf de son champ d'application est détruit et un nouveau champ d'application est créée lors de la restauration de l'élément. Le champ créé dans ngIf hérite de son parent à l'aide de prototypes de l'héritage.

Si ngModel est utilisé dans ngIf pour le lier à un JavaScript primitive définie dans la portée parent, toutes les modifications apportées à la variable à l'intérieur de l'enfant ne sera pas affecter la valeur de la portée parent, par exemple

<input type="text" ng-model="data">
<div ng-if="true">
    <input type="text" ng-model="data">
</div>        

Pour contourner cette situation et de mettre à jour le modèle de la portée parent de l'intérieur de l'enfant, l'utilisation d'un objet:

<input type="text" ng-model="data.input">
<div ng-if="true">
    <input type="text" ng-model="data.input">
</div>

Ou, $parent variable de référence de la portée parent de l'objet:

<input type="text" ng-model="data">
<div ng-if="true">
    <input type="text" ng-model="$parent.data">
</div>

ngShow

L' ngShow directive affiche ou masque la donnée de l'élément HTML basé sur l'expression fournie à l' ngShow d'attribut. L'élément est affiché ou masqué par l'ajout ou la suppression de l' ng-hide classe CSS sur l'élément. L' .ng-hide classe CSS est prédéfini dans AngularJS et définit le style d'affichage à aucun (à l'aide d'un !important drapeau).

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="1"></div>

<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="0" class="ng-hide"></div>

Lorsque l' ngShow expression false puis l' ng-hide CSS de la classe est ajouté à l' class l'attribut de l'élément à l'origine pour être caché. Lors de l' true, ng-hide classe CSS est retiré de l'élément provoquant l'élément n'apparaisse pas caché.

Answer 2

Peut-être un point intéressant à faire, est la différence entre les priorités entre les deux.

Aussi loin que je peux dire, le ng-si la directive est l'un des plus (sinon le plus élevé) priorité de tous Angulaire directives. Ce qui signifie: il sera exécuté en PREMIER, avant tous les autres, de moindre priorité, les directives. Le fait qu'il s'exécute en PREMIER, signifie qu'effectivement, l'élément est supprimé avant tout intérieure directives sont traitées. Ou au moins: c'est ce que je fais.

Je observerd et utilisé dans l'INTERFACE utilisateur je suis en train de construire pour mon client. Toute l'INTERFACE est assez fortement emballé, et il avait ng-show et ng-hide. Ne pas trop entrer dans les détails, mais j'ai construit un composant générique, qui pourrait être géré à l'aide de JSON config, donc j'ai fait un peu de commutation à l'intérieur du modèle. Il y a un ng-repeat présent, et à l'intérieur de la ng-repeat, un tableau s'affiche, qui a beaucoup de ng-montre, ng-cache et même ng-interrupteurs présents. Ils voulaient montrer au moins 50 répétitions dans la liste, ce qui aurait pour résultat plus ou moins de 1500 à 2000 des directives qui doivent être résolus. J'ai vérifié le code, et le Java backend + JS sur le front devrait prendre environ 150ms pour traiter les données, et ensuite Angulaire serait mâcher quelque 2 à 3 secondes sur elle, avant de les afficher. Le client n'a pas à se plaindre, mais j'ai été consterné :-)

Dans ma recherche, je suis tombé sur le ng-si la directive. Maintenant, c'est peut-être préférable de signaler qu'au point de concevoir cette INTERFACE, il n'y a pas de ng-si disponible. Parce que le ng-show et ng-hide avaient des fonctions en eux, qui ont retourné des valeurs booléennes, je pourrais facilement les remplacer tous avec ng-si. Ce faisant, tous les intérieurs directives semblait n'est plus évalué. Cela signifiait que je l'ai redescendu à environ un tiers de toutes les directives en cours d'évaluation, et donc, l'INTERFACE utilisateur accéléré jusqu'à environ 500ms - 1 sec temps de chargement. (Je n'ai aucun moyen de déterminer avec précision secondes)

Note: le fait que les directives ne sont pas évaluées, est une supposition éclairée sur ce qui se passe en dessous.

Donc, à mon avis: si vous avez besoin de l'élément à être présent sur la page (c'est à dire: pour la vérification de l'élément, ou quoi que ce soit), mais simplement d'être caché, l'utilisation ng-show/ng-hide. Dans tous les autres cas, l'utilisation ng-si.

Answer 3

L' ng-if directive supprime le contenu de la page et ng-show/ng-hide utilise le CSS display de la propriété de masquer le contenu.

Ceci est utile dans le cas où vous souhaitez utiliser :first-child et :last-child pseudo-sélecteurs de style.

Answer 4

@EdSpencer est correct. Si vous avez beaucoup d'éléments et que vous utilisez ng-si seulement instancier les plus pertinentes, vous permet d'économiser des ressources. @CodeHater est également légèrement correcte, si vous allez à supprimer et afficher un élément très souvent, en le cachant au lieu de supprimer l'on pourrait améliorer les performances.

Les principaux cas d'utilisation je trouve que pour ng-si, c'est qu'il me permet de propreté, de valider et de eliminte un élément si le contenu est illégal. Par exemple je pourrais référence à une valeur nulle de l'image nom de la variable et qui lèvera une erreur, mais si je ng-si et vérifier si elle est null, c'est du tout bon. Si j'ai fait une ng-show, l'erreur serait encore le feu.