发表新帖
发表新帖

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

前端 未结
关注
12 1384
执笔经年
执笔经年 2020-11-22 02:22

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

相关标签:
12条回答
  • 清酒与你
    2020-11-22 02:57

    Maybe an interesting point to make, is the difference between priorities between both.

    As far as I can tell, the ng-if directive has one of the highest (if not the highest) priority of all Angular directives. Which means: it will run FIRST before all other, lower prioritised, directives. The fact that it runs FIRST, means that effectively, the element is removed before any inner directives are processed. Or at least: that's what I make of it.

    I observerd and used this in the UI I'm building for my current customer. The entire UI is quite heavily packed, and it had ng-show and ng-hide all over it. Not to go into too much detail, but I built a generic component, which could be managed using JSON config, so I had to do some switching inside the template. There is an ng-repeat present, and inside the ng-repeat, a table is shown, which has a lot of ng-shows, ng-hides and even ng-switches present. They wanted to show at least 50 repeats in the list, which would result in more or less 1500-2000 directives to be resolved. I checked the code, and the Java backend + custom JS on the front would take about 150ms to process the data, and then Angular would chew some 2-3 seconds on it, before displaying. The customer did not complain, but I was appalled :-)

    In my search, I stumbled across the ng-if directive. Now, maybe it's best to point out that at the point of conceiving this UI, there was no ng-if available. Because the ng-show and ng-hide had functions in them, which returned booleans, I could easily replace them all with ng-if. By doing so, all inner directives seemed to be no longer evaluated. That meant that I dropped back to about a third of all directives being evaluated, and thus, the UI speeded up to about 500ms - 1 sec loading time. (I have no way to determine exact seconds)

    Do note: the fact that the directives are not evaluated, is an educated guess about what is happening underneath.

    So, in my opinion: if you need the element to be present on the page (ie: for checking the element, or whatever), but simply be hidden, use ng-show/ng-hide. In all other cases, use ng-if.

    0 讨论(0)
  • 遥遥无期
    2020-11-22 03:01

    @Gajus Kuizinas and @CodeHater are correct. Here i am just giving an example. While we are working with ng-if, if the assigned value is false then the whole html elements will be removed from DOM. and if assigned value is true, then the html elements will be visible on the DOM. And the scope will be different compared to the parent scope. But in case of ng-show, it wil just show and hide the elements based on the assigned value. But it always stays in the DOM. Only the visibility changes as per the assigned value.

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

    Hope this example will help you in understanding the scopes. Try giving false values to ng-show and ng-if and check the DOM in console. Try entering the values in the input boxes and observe the difference.

    <!DOCTYPE html>

    Hello 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}}

    0 讨论(0)
  • 无人共我
    2020-11-22 03:02

    One interesting difference in ng-if and ng-show is:

    SECURITY

    DOM elements present in ng-if block will not be rendered in case of its value as false

    where as in case of ng-show, the user can open your Inspect Element Window and set its value to TRUE.

    And with a whoop, whole contents that was meant to be hidden gets displayed, which is a security breach. :)

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-11-22 03:07

    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);
  }
})
    <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>

    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.

    0 讨论(0)
  • 不知归路
    2020-11-22 03:08

    One important thing to note about ng-if and ng-show is that when using form controls it is better to use ng-if because it completely removes the element from the dom.

    This difference is important because if you create an input field with required="true" and then set ng-show="false" to hide it, Chrome will throw the following error when the user tries to submit the form:

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

    The reason being the input field is present and it is required but since it is hidden Chrome cannot focus on it. This can literally break your code as this error halts script execution. So be careful!

    0 讨论(0)
  • 执笔经年
    2020-11-22 03:08

    ngIf makes a manipulation on the DOM by removing or recreating the element.

    Whereas ngShow applies a css rules to hide/show things.

    For most of the cases (not always), I would summarize this as, if you need a one time check to show/hide things, use ng-if, if you need to show/hide things based on the user actions on the screen (like checked a checkbox then show textbox, unchecked then hide textbox etc..), then use ng-show

    0 讨论(0)
 看不清?
提交回复
热议问题