What is the difference between ng-if and ng-show/ng-hide

Question

I\'m trying to understand the difference between ng-if and ng-show/ng-hide, but they look the same to me.

Is there a differenc

Answer 1

Fact, that ng-if directive, unlike ng-show, creates its own scope, leads to interesting practical difference:

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

   
ng-if:
   

      

        {{show}}
        Delete {{show}}
        Yes {{show}}
        No
      
   
   
   
ng-show:
   

      

        {{show}}
        Delete {{show}}
        Yes {{show}}
        No
      
   
   
   
ng-if with $parent:
    

      

        {{show}}
        Delete {{$parent.show}}
        Yes {{$parent.show}}
        No
      
   

At first list, on-click event, show variable, from innner/own scope, is changed, but ng-if is watching on another variable from outer scope with same name, so solution not works. At case of ng-show we have the only one show variable, that is why it works. To fix first attempt, we should reference to show from parent/outer scope via $parent.show.