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

阅读更多

一、ng-show（ng-hide）和ng-if都是控制标签的显示和隐藏，为什么angularjs会定义两个指令来供我们使用呢，不多多说肯定有各自的使用场景，接下来我们看哈实际原理：
ng-show实质性就是控制标签的显示和隐藏，内部是display: none；
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，减少加载。

• 
• 大小: 28.1 KB

• 查看图片附件