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. SQL SERVER 2008 r2安装失败之Integration Service

    因工作需要,遂把以前的2008升级到r2,升级失败,具体原因忘了,卸载2008,清了注册表删了文件,结果安装的时候失败了,如下图: 下一步-有错误日志和错误的序列号,错误日志在C:\Program F ...

  2. join（）方法之我见

    JavaScript join() 方法 定义和用法 join() 方法用于把数组中的所有元素放入一个字符串. 元素是通过指定的分隔符进行分隔的. 语法 arrayObject.join(separa ...

  3. python27（32位）安装模块报错“error: Unable to find vcvarsall.bat”

    1)首先,下载一个Microsoft Visual C++ Compiler for Python 2.7的补丁,下载地址在这里: http://www.microsoft.com/en-us/dow ...

  4. js参数传递分析

    需要明白,js基本类型存放在栈,对象存放在堆. 结论:基本类型变量作为参数,不会改变变量值.对象变量作为参数,不修改属性(访问原始对象的操作),也不会改变变量值 起因,是群里一个问题: var a = ...

  5. winform在设置控件enabled=false后，无法更改控件字体颜色的问题

    项目界面设计的时候,发现在设置button的enabled=false后,原本设计的字体颜色跟预设的不一样,查了一些资料后,在网上看到这样一段代码: [System.Runtime.InteropSe ...

  6. 安装go语言，配置环境及IDE，只需3步

    安装go语言,配置环境及IDE,只需3步 ( 欢迎加入go语言群: 218160862 , 群内有实践) 第1.下载 go压缩包,解压   ,如果你是window系统,请选择go1.5.windows ...

  7. Android 学习第12课，应用出错信息

    应用在运行时,出现的错误信息都会在LogCat中显示 如果调出LogCat ? 菜单:窗口 -> 显示视图 -> 其他 -> LogCat

  8. C++开发过程多线程同步lock的实现

    在程序开发过程经常使用到多线程,而多线程始终与锁存在紧密地联系,以下详细的介绍如何在C++程序开发过程中自定义锁的几种方法. 1. 下面给出一段代码展现如何通过Mutex实现锁的功能(window p ...

  9. 图片轮播（bootstrap）与 圆角搜索框(纯css)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  10. 类似baidu搜索 修正jquery的autocomplete在firefox下不支持中文输入法的bug

    解决方法: