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

ng-if ng-show ng-hide 的区别的更多相关文章

  1. 不知道张(zhāng)雱（pāng）是谁？你out了！

    张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...

  2. ng build --aot 与 ng build --prod

    angluar的编译有以下几种方式: ng build  常规的压缩操作    代码体积最大 ng build --aot   angular预编译      代码体积较小 ng build --pr ...

  3. 【转】重载(overload)，覆盖(override),隐藏(hide)的区别

    原文网址:http://www.cppblog.com/zgysx/archive/2007/03/12/19662.html 写正题之前,先给出几个关键字的中英文对照,重载(overload),覆盖 ...

  4. 重载(overload)、覆盖(override)、隐藏(hide)的区别

    http://blog.csdn.net/yanjun_1982/archive/2005/09/02/470405.aspx 重载是指不同的函数使用相同的函数名,但是函数的参数个数或类型不同.调用的 ...

  5. 重载(overload)，覆盖(override),隐藏(hide)的区别

    写正题之前,先给出几个关键字的中英文对照,重载(overload),覆盖(override),隐藏(hide).在早期的C++书籍中,可能翻译的人不熟悉专业用语(也不能怪他们,他们不是搞计算机编程的, ...

  6. 【码在江湖】前端少侠的json故事（中）ng的json

    ng的json 正所谓"人在江湖,身不由己",在开发之路上前端少侠dk遇到过种种困难,尤其在与后端进行数据对接的时候,不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式,正当他以为 ...

  7. 高可用Hadoop平台－Flume NG实战图解篇

    1.概述 今天补充一篇关于Flume的博客,前面在讲解高可用的Hadoop平台的时候遗漏了这篇,本篇博客为大家讲述以下内容: Flume NG简述 单点Flume NG搭建.运行 高可用Flume N ...

  8. Ngnice-国内ng学习网站

    今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...

  9. 国内ng学习网站

    Ngnice-国内ng学习网站2015-01-25 21:30 by 破狼, 534 阅读, 3 评论,收藏, 编辑 今天给angular新手介绍一个国内开源的ng学习网站http://www.ngn ...

  10. ng环境搭建步骤

    1,安装node node -v查看版本号 2,安装淘宝镜像 npm config set registry https://registry.npm.taobao.org 3,安装cnpm npm ...

随机推荐

  1. BootStrap 的modal 中使用typeahead

    刚开始怎么也不现实,在页面上显示正常. 调试发现是下拉框被modal遮挡住了, 找到样式dropdown-menu    修改z-index值为2000后,显示正常.(modal的z-index值为1 ...

  2. C语言程序设计第四次作业

    态度决定一切,我依然要说这句话,每次同学们提交的作业,我都会认真评阅,相比实验课而言,可以有更充足的时间来发现问题,很多同学的代码依然会存在一些语法错误或者考虑不周全的现象,我提出了,那么,你认真看了 ...

  3. 【转】java中volatile关键字的含义

    java中volatile关键字的含义   在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言 ...

  4. Python中文问题（转）

    在本文中,以'哈'来解释作示例解释所有的问题,“哈”的各种编码如下: 1. UNICODE (UTF8-16),C854: 2． UTF-8,E59388: 3． GBK,B9FE. 一.python ...

  5. lumia520刷机注意事项

    1.下载后的固件名称中设备名前的随机字符都要去掉 2.安装完nokia care suit后最好在driver目录下重新双击安装usb driver

  6. [转] js深拷贝和浅拷贝

    一.数组的深浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致 ...

  7. KinerCode.js

    1 /*验证码*/ function KinerCode(options) { this.opt = this.extend(true, this.options, options); this.op ...

  8. zenefits oa - random(5) to generate a random(7)

    If given a function that generates a random number from 1 to 5, how do you use this function to gene ...

  9. Windows And Video Memory

    MSDN Blogs > Zemblanity > Windows And Video Memory   Windows And Video Memory Tom_Mulcahy 11 F ...

  10. 判断IP地址的类型

    #include <stdio.h> #include <stdlib.h> void main() { ]; int ip_addr; printf("请输入IP地 ...