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

pour autant que je sache, la directive ng-if a l'une des plus hautes priorités (sinon la plus haute) de toutes les directives angulaires. Ce qui veut dire qu'elle passera en premier avant toutes les autres directives. Le fait qu'il fonctionne en premier, signifie qu'effectivement, l'élément est enlevé avant tout intérieur directives sont traitées. Ou au moins: ce que je fais.

j'ai observé et utilisé ceci dans L'UI que je construis pour mon client actuel. Toute l'INTERFACE est assez fortement emballé, et il avait ng-show et ng-hide. Sans entrer trop dans les détails, mais j'ai construit un composant générique, qui pourrait être géré en utilisant la configuration JSON, donc j'ai dû faire quelques changements à 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ésent. Ils voulaient faire apparaître au moins 50 reprises dans la liste, ce qui aboutirait à plus ou moins 1500 directives 2000 à résoudre. J'ai vérifié le code, et le Java backend + custom JS sur le devant prendrait environ 150ms pour traiter les données, et puis Angular mâcher quelques 2-3 secondes dessus, avant de s'afficher. Le client ne s'est pas plaint, mais j'ai été consterné: -)

dans ma recherche, je suis tombé sur la directive ng-if. Maintenant, peut-être qu'il est préférable de souligner qu'à la point de concevoir cette assurance-chômage, il n'y avait pas de ng-si disponible. Parce que le ng-show et le ng-hide avaient des fonctions en eux, ce qui rendait booléens, je pouvais facilement les remplacer tous par ng-if. Ce faisant, toutes les directives internes ne semblaient plus être évaluées. Cela signifie que je suis tombé à environ un tiers de toutes les directives évaluées, et donc, L'UI accéléré jusqu'à environ 500ms - 1 seconde de temps de chargement. (je n'ai aucun moyen de déterminer avec précision secondes)

do note: le fait que les directives ne sont pas évaluées, est une conjecture instruite sur ce qui se passe en dessous.

donc, à mon avis: si vous avez besoin de l'élément pour être présent sur la page (c'est-à-dire: pour vérifier l'élément, ou n'importe quoi d'autre), mais tout simplement être caché, utilisez ng-show/ng-hide. Dans tous les autres cas, utilisez ng-if.

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

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

@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 un peu correct, si vous allez supprimer et montrer un élément très souvent, le cacher au lieu de le supprimer pourrait améliorer les performances.

le cas d'utilisation principal que je trouve pour le ng-si c'est qu'il me permet de valider et d'éliminer proprement un élément si le contenu est illégal. Par exemple je pourrais référence à un la variable de nom d'image null et cela lancera une erreur mais si l'On-si et vérifier si c'est null, tout va bien. Si je faisais un ng-show, l'erreur fonctionnerait toujours.

une chose importante à noter au sujet de ng-if et ng-show est que lors de l'utilisation des contrôles de forme, il est préférable d'utiliser ng-if parce qu'il supprime complètement l'élément du dom.

cette différence est importante parce que si vous créez un champ d'entrée avec required="true" et mettez ng-show="false" pour le cacher, Chrome va jeter l'erreur suivante lorsque l'utilisateur essaie de soumettre le formulaire:

An invalid form control with name='' is not focusable.

la raison étant que le champ input est présent, et c'est required mais puisqu'il est caché Chrome ne peut pas se concentrer sur elle. Cela peut littéralement casser votre code d'erreur s'arrête l'exécution du script. Donc soyez prudent!

@Gajus Kuizinas et @CodeHater sont corrects. Ici, je suis juste en donnant un exemple. Pendant que nous travaillons avec ng-if, si la Valeur assignée est false, alors les éléments html seront supprimés du DOM. et si la Valeur assignée est vraie, alors les éléments html seront visibles sur le DOM. Et la portée sera différente par rapport à la portée principale. Mais dans le cas de ng-show, il montrera et cachera les éléments basés sur la Valeur assignée. Mais elle reste toujours dans les DOM. Seul le la visibilité change selon la Valeur assignée.

http://plnkr.co/edit/3G0V9ivUzzc8kpLb1OQn?p=preview

espérons que cet exemple vous aidera à comprendre les portées. Essayez de donner de fausses valeurs à ng-show et ng-if et vérifiez le DOM dans la console. Essayez d'entrer les valeurs dans les boîtes de saisie et observez la différence.

<!DOCTYPE html>

Bonjour Plunker!

<input type="text" ng-model="data">
<div ng-show="true">
    <br/>ng-show=true :: <br/><input type="text" ng-model="data">
</div>
<div ng-if="true">
    <br/>ng-if=true :: <br/><input type="text" ng-model="data">
</div> 
{{data}}

fait, que ng-if directive, contrairement à ng-show , crée sa propre portée, conduit à une différence pratique intéressante:

angular.module('app', []).controller('ctrl', function($scope){
  $scope.delete = function(array, item){
    array.splice(array.indexOf(item), 1);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='ctrl'>
   <h4>ng-if:</h4>
   <ul ng-init='arr1 = [1,2,3]'>
      <li ng-repeat='x in arr1'>
        {{show}}
        <button ng-if='!show' ng-click='show=!show'>Delete {{show}}</button>
        <button ng-if='show' ng-click='delete(arr1, x)'>Yes {{show}}</button>
        <button ng-if='show' ng-click='show=!show'>No</button>
      </li>
   </ul>
   
   <h4>ng-show:</h4>
   <ul ng-init='arr2 = [1,2,3]'>
      <li ng-repeat='x in arr2'>
        {{show}}
        <button ng-show='!show' ng-click='show=!show'>Delete {{show}}</button>
        <button ng-show='show' ng-click='delete(arr2, x)'>Yes {{show}}</button>
        <button ng-show='show' ng-click='show=!show'>No</button>
      </li>
   </ul>
   
   <h4>ng-if with $parent:</h4>
    <ul ng-init='arr3 = [1,2,3]'>
      <li ng-repeat='item in arr3'>
        {{show}}
        <button ng-if='!show' ng-click='$parent.show=!$parent.show'>Delete {{$parent.show}}</button>
        <button ng-if='show' ng-click='delete(arr3, x)'>Yes {{$parent.show}}</button>
        <button ng-if='show' ng-click='$parent.show=!$parent.show'>No</button>
      </li>
   </ul>
</div>

à la première liste, on-click événement, show variable, de innner/own portée, est changée, mais ng-if regarde sur une autre variable de extérieur portée avec le même nom, donc solution ne fonctionne pas. En cas de ng-show nous avons la seule variable show , c'est pourquoi cela fonctionne. Pour corriger la première tentative, nous devrions faire référence à show du champ parent/externe via $parent.show .

1. ng-si false, supprimer des éléments dans le DOM. Cela signifie que tous vos événements, les directives attachées à ces éléments seront perdus. Par exemple, ng-cliquez sur l'un des éléments enfant, quand ng-si évalué à false, cet élément sera retiré de DOM et de nouveau quand il est vrai qu'il est recréé.

2. ng-show/ng-hide ne supprime pas les éléments du DOM. Il utilise des styles CSS (.ng-hide) pour cacher/montrer des éléments .Ce de la façon dont vos événements, les directives qui étaient attachées aux enfants ne seront pas perdus.

3. ng-si les crée un enfant tout en ng-show/ng-hide ne le fait pas.

À noter, une chose qui m'est arrivé maintenant: ng-show ne Cacher le contenu via css, Oui, mais il a entraîné des problèmes étranges dans div's supposé être des boutons.

j'ai eu une carte avec deux boutons sur le bas et en fonction de l'état réel un est échangé avec un troisième, bouton d'édition d'exemple avec une nouvelle entrée. En utilisant ng-show=false pour masquer le gauche (présent en premier dans le fichier) il s'est produit que le bouton Suivant a fini avec le bord droit en dehors de la carte. ng-si des correctifs en n'incluant pas le code. (Vient de vérifier s'il y a des surprises cachées en utilisant ng-if au lieu de ng-show)

ng-show et ng-hide travail dans le sens opposé. Mais la différence entre ng-hide ou ng-show avec ng-si,si nous utilisons ng-si l'élément créé dans les dom, mais avec ng-hide/ng-show élément sera caché complètement.

ng-show=true/ng-hide=false:
Element will be displayed

ng-show=false/ng-hide=true:
element will be hidden

ng-if =true
element will be created

ng-if= false
element will be created in the dom. 

Une différence intéressante en ng-si et ng-show est:

SECURITY

éléments DOM présents dans ng - si bloc ne sera pas rendue en cas de sa valeur comme fausse

où, comme dans le cas de ng-show, l'utilisateur peut ouvrir votre fenêtre D'élément D'inspection et régler sa valeur à TRUE.

Et avec un cri, tout le contenu qui devait être caché s'affiche, ce qui est une sécurité violation. :)