ng-show和ng-if的区别和使用场景

一、ng-show（ng-hide）和ng-if都是控制标签的显示和隐藏，为什么angularjs会定义两个指令来供我们使用呢，不多多说肯定有各自的使用场景，接下来我们看哈实际原理：

ng-show实质性就是控制标签的显示和隐藏，内部是display: none；

ng-if则是移除标签和插入标签：；

二、实际比较

定义三个div

<div ng-show="true">我是显示</div>
  	<div ng-show="">我是隐藏</div>
  	<div ng-if="">我是移除</div>

看浏览器显示效果



我们看到ng-show的连个div的元素还是存在，只是样式的display被分别设置为block和none，而ng-if的标签已经被移除。

三、实际场景选择

3.1.场景一

ng-if重新创建元素时用的是它们编译后的状态。如果ng-if内部的代码加载之后被jQuery修改过（例如用.addClass），那么当ng-if的表达式值为false时，这个DOM元素会被移除，表达式再次成为true时这个元素及其内部的子元素会被重新插入DOM，此时这些元素的状态会是它们的原始状态，而不是它们上次被移除时的状态。也就是说无论用jQuery的.addClass添加了什么类都不会存在了。而ng-show和ng-hide则可以保留dom元素上次修改后的状态。

3.2.场景二

当我们使用ng-bind-html时候变量内容过多，此时我们需要控制显示或隐藏标签，此时你用ng-if会不断的操作dom，你会发现显示的速度非常慢。



总结：当不停操作标签且内容较少时候，并且不存在动态操作标签样式时候。运用ng-show和ng-if都可以；当不停操作标签且内容较少时候，并且存在动态操作标签样式时候。运用ng-show；当标签只使用一次就没得作用建议使用ng-if，减少加载。