ng-show和ng-if的区别和使用场景
2017-10-11 23:47
483 查看
一、ng-show(ng-hide)和ng-if都是控制标签的显示和隐藏,为什么angularjs会定义两个指令来供我们使用呢,不多多说肯定有各自的使用场景,接下来我们看哈实际原理:
ng-show实质性就是控制标签的显示和隐藏,内部是display: none和block
ng-if则是移除标签和插入标签;
二、实际比较
定义三个div
<div ng-show="true">我是显示</div>
<div ng-show="">我是隐藏</div>
<div ng-if="">我是移除</div>
看浏览器显示效果:
![](https://img-blog.csdn.net/20171011235244091?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1eHVmZWlqaWRpYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
我们看到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,减少加载。
ng-show实质性就是控制标签的显示和隐藏,内部是display: none和block
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,减少加载。
相关文章推荐
- ng-if | ng-show | ng-hide的使用场景
- ng-if、ng-show和ng-hide指令的区别
- angular.js里的ng-show,ng-hide与ng-if的区别
- AngularJs ng-show 和 ng-if的区别
- (十四)ng-if与ng-show、ng-hide指令的区别和注意事项
- Angular.js中ng-if、ng-show和ng-hide的区别介绍
- ng-show和ng-if的区别
- 正确使用ng-if和ng-show
- ng-if与ng-show、ng-hide指令的区别和注意事项
- 正确使用ng-if和ng-show
- angular中的ng-if和ng-show的区别以及ng-if的作用域问题
- ng-if与ng-show、ng-hide指令的区别
- ng-if和ng-show的区别
- Angular.js中ng-if、ng-show和ng-hide的区别介绍
- ng-if,ng-show,ng-hide的区别
- 【转】ng-if与ng-show区别以及ng-if会创建子作用域问题
- ng-if 和 ng-show/ng-hide 之间的区别
- Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
- ng-if和ng-show、ng-hide区别
- java抽象类和接口的区别,使用场景