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. iOS学习之cocoaPods

    Cocoapods Cocoapods作用:iOS开发时,项目中会引用许多第三方库,CocoaPods可以用来方便的统一管理这些第三方库. 第一步安装: 下载安装CocoaPods需要Ruby环境 M ...

  2. array_filter函数

    利用array_filter函数轻松去掉多维空值,而数组的下标没有改变, 如果自定义过滤函数返回 true,则被操作的数组的当前值就会被包含在返回的结果数组中, 并将结果组成一个新的数组.如果原数组是 ...

  3. css position static | absolute | fixed | relative

    <div id="bigbox1">    <div id="box1" class="box">box1</ ...

  4. 基于vue2.0的分页组件开发

    今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...

  5. Linux系统下远程文件拷贝scp命令

    在Linux系统下,不同机器上实现文件拷贝 一.将本地文件拷贝到远程机器: scp /home/administrator/news.txt root@192.168.6.129:/etc/squid ...

  6. C++操作MySQL大量数据插入效率低下的解决方法

    #include <iostream> #include <winsock2.h> #include <string> #include "mysql.h ...

  7. iar 问题

    我的笔记本是win10 之前用的iar 430 版本是5.5 都没有问题.但,突然就

  8. robotframework接口测试初探1

    robotframework这个框架最近很多人在使用它,大部分是和selenium结合的,大概看了下,然后发现这个做接口测试感觉也还不错,初步研究了下 环境安装: robotframework这个环境 ...

  9. [转] LBYL与EAFP两种防御性编程风格

    检查数据可以让程序更健壮,用术语来说就是防御性编程.检查数据的时候,有这样的两种不同的风格.LBYL:Look Before You Leap  EAFP:Easier to Ask Forgiven ...

  10. Java设计模式（十二） 策略模式

    原创文章,同步发自作者个人博客,http://www.jasongj.com/design_pattern/strategy/ 策略模式介绍 策略模式定义 策略模式(Strategy Pattern) ...