在使用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则不会。

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

<!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

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

});

页面最终的HTML片断如下：

<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>

（转）

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

  1. angular报错：angular.min.js:118Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq

    报错代码如下: <div ng-controller="HelloAngular"> <p>{{greeting.text}},angular</p& ...

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

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

  3. angular.min.js:118 Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?

    1,错误如图所示 简单说下错误原因是:没有js没有注册进去. 解决方法: 1.看下index.html有没有引入你的js文件. 2.看下app.js有没有注册js,比如我这次就是这步没做好,合并代码时 ...

  4. AngularJS中angular.min.js:80 Error: [ng:areq] http://errors.angularjs.org/1.2.9/ng/areq

    报出来的时候,出现这种错误,是因为在引入控制器的时候没有引入成功,我遇到这个错误是在因为没有将父控制器引入到子控制器中.

  5. ng build --aot 与 ng build --prod

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

  6. angularJS之ng-bind与{{}}取值的区别

    1:{{ }} 是等页面加载完后,再取值. 2:ng-bind 它是在页面加载的时候,是不会显示{{name}}这种变量出来. 3:ng-bind 可以解决 ng 页面闪烁加载问题. 4:ng-bin ...

  7. angularjs 中 Factory,Service,Provider 之间的区别

    本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...

  8. Android对话框之dismiss和cancel和hide区别

    在我们看来两者效果都是一样的,其实看下源码就知道cancel肯定会去调dismiss的,如果调用的cancel的话就可以监听DialogInterface.OnCancelListener. /** ...

  9. AngularJS展示数据的ng-bind指令和{{}} 区别

    在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: 1 <p>{{text}}</p> 另一种是使用基于属性的指令,叫做ng-bind: 1 &l ...

  10. hidden,display,visibility ,jQuery中的hide()区别

    hidden是html中的属性,规定元素是否可见 display是css中的样式,规定元素是否显示 visible 是css中的样式,规定元素是否可见 display:none ---不为被隐藏的对象 ...

随机推荐

  1. Mac下使用sublime Text打开隐藏目录

    我们用 sublime Text 打开时,默认是看到非隐藏的目录和文件,如下图: 这时候在这个节目,按下 command +shift + 句号 快捷键,会自动切换 隐藏状态的, 这时候就可以切换成下 ...

  2. 1..net mvc的原理概述

    请求过来,根据ip和端口,由iis服务器进行接收,如果是静态文件则直接返回文件内容,如果无法解析,则根据映射规则找到对应请求后缀 的ASPNET_ISAPI.dll处理程序集,交由其进行处理. 1.此 ...

  3. 解决全站字符乱码（POST和GET中文编码问题）

    1 说明 乱码问题: 获取请求参数中的乱码问题: POST请求:request.setCharacterEncoding(“utf-8”): GET请求:new String(request.getP ...

  4. 当react 项目使用px2rem

    参考资料:http://easywork.xin/2018/09/02/react-2/ 我拿到的设计图 是  375px //配置px2rem px2rem({remUnit: 37.5})   在 ...

  5. 用Appium让Android功能自动化测试飞起来

    前言 做Android端功能自动化已有2年多的时间了,使用过的功能自动化框架有Robotium.Uiautomator.Appium.最近研究自动化case复用的方案,调研了Appium的自动化框架, ...

  6. 算法之冒泡排序(Java语言)

    冒泡排序(英语:Bubble Sort) 是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是说 ...

  7. spring boot(8)-mybatis三种动态sql

    脚本sql XML配置方式的动态SQL我就不讲了,有兴趣可以自己了解,下面是用<script>的方式把它照搬过来,用注解来实现.适用于xml配置转换到注解配置 @Select(" ...

  8. MAC电脑安装svn客户端cornerstone

    个人感觉在mac上最好用的svn客户端就是cornerstone,公司客户端也统一使用这个 sudo spctl --master-disable 这条命令作用就是使得mac运行安装任何来源App,不 ...

  9. oracle表名、字段名大小写问题。

    oracle  表名 .字段名 默认不区分大小写,除非建表语句中带双引号 如CREATE TABLE "TableName"("ID" number). CRE ...

  10. Unity IOC/DI使用

    一.IOC介绍 IOC(Inversion of Control),中文译为控制反转,又称为“依赖注入”(DI ＝Dependence Injection) IOC的基本概念是:不创建对象,但是描述创 ...