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. 写简单游戏，学编程语言-python篇：大鱼吃小鱼

    很常见的游戏之一,实现原理并不复杂,并且参考了几个相关的代码.这边主要还是以学习编程语言和学习编程思路为重点记录一下吧.最近时间有点吃紧,只能匆忙记录一下.用pygame做的大鱼吃小鱼的游戏截图如下: ...

  2. NOIP 考前 高斯消元练习

    POJ 1830 列出n个方程右边为最后的情况 每一行代表第几个灯的情况,每一行代表是否按第几个按钮写出方程即可. #include <cstdio> #include <cstri ...

  3. NOIP 赛前模拟记录

    8.11 T1 给定一个序列M,求出能过构造出的序列使得(Si+Si+1)/2=Mi成立的序列个数.保证M,S递增. T2 平面点集中最大的四边形面积 T3 不太懂得一道国家队选拔的加强版. 90+2 ...

  4. Java随笔二

    1.常量:final可以设置变量,也可以表示这个变量只能被赋值一次(即可以声明一个空变量,只能赋值一次):可以使用关键字static final设置一个类常量,以供一个类中的多个方法使用. 2.字符串 ...

  5. Python Django 数据库操作

    1. 建立app 在自己的工程项目目录下输入: python manage.py startapp myapp(你想建立的app名称) 建立一个叫myapp的app 这样,在你的工程项目目录下会出现一 ...

  6. Centeros7 环境相关问题

    服务处理命令 systemctl start mariadb #启动MariaDB systemctl stop mariadb #停止MariaDB systemctl restart mariad ...

  7. android 返回键 操作

    cocos2dx项目移植到android平台上对于 android手机返回键,主菜单键等键的相关操作,本篇详细对返回键做个简单的介绍说明, 不足不对之处,请同猿们指出. 首先在主activity下,即 ...

  8. Launcher 壁纸

    0.添加壁纸: 在给系统换默认的壁纸的时候,需要修改一些地方: 首先是默认的壁纸,这个是在framework中配置的,所以要修改framework中找到drawable-nodpi(这个文件夹中的内容 ...

  9. python之变量篇

    列表:a=['a',112,'bss']元组:只读列表,不能二次赋值str=('s','t',1.5)元字典:用"{ }"标识,键值对存储dic={}dic['s']='test' ...

  10. MAC下如何显示隐藏文件

    1.在终端上输入以下命令 defaults write com.apple.finder AppleShowAllFiles -bool true 2.重新启动Finder Command + Opt ...