在使用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. 撩课-Python-每天5道面试题-第5天

    一. 给定一个圆心和半径, 以及一个点坐标, 判定该点是否在圆内; 例如: 用户输入圆心: (1, 2) 半径: 2.5 测试点为(2, 2)结果: 判定测试点是在圆内 思路: 结合勾股定理, 计算测 ...

  2. java队列queue的我觉得很好的使用方式

    LinkedList实现了queue接口,通常使用LinkedList 其中关键两个函数:offer().poll() offer()表示“排队”----插入到队列最前,poll()表示轮到了队列最前 ...

  3. 深入理解Java虚拟机---类加载机制（简略版）

    类加载机制 谈起类加载机制,在这里说个题外话,当初本人在学了两三个月的Java后,只了解了一些皮毛知识,就屁颠屁颠得去附近学校的招聘会去蹭蹭面试经验,和HR聊了一会后开始了技术面试,前抛出了两个简单的 ...

  4. HTML基本结构及标签样式

    <!DOCTYPE html>————声明 <html> <head>————头部设置信息 <title>文件标题</title> < ...

  5. PoPo数据可视化周刊第2期

    羡辙在bilibili开课啦 就在这个月,不知道是不是受了 @Jannchie见齐 的影响,羡辙竟然在bilibili开授Echarts课程,目前已开课两节. [滚城一团]的 ECharts 训练营 ...

  6. XAMPP添加二级域名

    1.在hosts中添加域名 2.点击config选择httpd.conf,去掉Include前面的#号 3.取消NameVirtualHost前面的##,在页面底端添加二级域名 4.重启xampp

  7. centos7 安装 maven 和ant git 以及 rocketmq 4.2安装过程（安装成功，调用失败）

    1.maven 安装 wget http://repos.fedorapeople.org/repos/dchen/apache-maven/epel-apache-maven.repo -O /et ...

  8. 算法之杨辉三角形(Java语言)

    杨辉三角形, 又称贾宪三角形.帕斯卡三角形. 前9层写出来如下: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 1 6 15 20 15 6 1 1 7 21 ...

  9. maven(12)，排除冲突JAR包

     JAR包冲突 <dependencies> <dependency> <groupId>org.springframework</groupId> ...

  10. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...