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

时间:2023-12-05 13:52:14

一、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和ng-if的区别和使用场景

我们看到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,减少加载。