正文

ng-if ng-show ng-hide 的区别

IP云
IP云V管理员/0 阅读
12/01
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

angularjs ng-if ng-show ng-hide区别

在使用anularjs开发前端页面时，常常使用ng-show、ng-hide、ng-if功能来控制页面元素的显示或隐藏，那他们之间有什么不同呢？

实现原理方面：ng-show/ng-hide是通过修改CSS样式方式控制元素显示与隐藏，对应的DOM元素会一直存在于当前页面中，而ng-if根据表达式的值动态的在当前的页面中添加删除页面元素。如果赋值表达式的值为false，那么这个元素就会从页面中删除，否则会添加一个元素。ng-if创建元素时用的是被它编译后的代码，如果ng-if内部的代码被其它方式修改过，那么修改只会对本次展现有效，页面元素重新渲染后修改效果会消失，而ng-show/ng-hide则能够保留dom元素上次修改后的状态。

在作用域方面，两者也存在差异：当一个元素被ng-if从DOM中删除时，与其关联的作用域也会被销毁。而且当它重新加入DOM中时，则会生成一个新的作用域，而ng-show和ng-hide则不会。

通过如下代码并结合浏览器开发者工具可以清楚的看出二者之间的不同：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" ng-app = "app" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< title >ng-if ng-show ng-hide</ title >
< script type = "text/javascript" class = "library" src = "http://libs.useso.com/js/angular.js/1.2.9/angular.min.js" ></ script >
</ head >
< body >
< div ng-controller = "MainCtrl" >
< div ng-show = "false" >
ng-show = false
</ div >
< div ng-show = "true" >
ng-show=true
</ div >
< div ng-if = "true" >
ng-if = true
</ div >
< div ng-if = "false" >
ng-if = false
</ div >
</ div >
</ body >
</ html >

js

1
2
angular.module( "app" ,[]).controller( "MainCtrl" , function ($scope){
});

页面最终的HTML片断如下：

1
2
3
4
5
6
7
8
9
10
11
12
< div ng-controller = "MainCtrl" class = "ng-scope" >
< div ng-show = "false" class = "ng-hide" >
ng-show = false
</ div >
< div ng-show = "true" class = "" >
ng-show=true
</ div >
<!-- ngIf: true --> < div ng-if = "true" class = "ng-scope" >
ng-if = true
</ div > <!-- end ngIf: true -->
<!-- ngIf: false -->
</ div >

由于ng-if/ng-hide（ng-show）在原理上有很大的差别，所以在某些情况下展示出来的效果有较大的差别，比如这篇博文中提到的情况: http://www.cnblogs.com/iceseal/p/4077417.html

关于二者之间的区别，还可以参考这篇文章: http://stackoverflow.com/questions/19177732/what-is-the-difference-between-ng-if-and-ng-show-ng-hide

相关阅读

目录[+]