在使用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. 找到链表中倒数第k个数

    本文来源于翁舒航的博客,点击即可跳转原文观看!!!(被转载或者拷贝走的内容可能缺失图片.视频等原文的内容) 若网站将链接屏蔽,可直接拷贝原文链接到地址栏跳转观看,原文链接:https://www.cn ...

  2. OutOfMemoryError（内存溢出）解决办法

    第一种OutOfMemoryError: PermGen space 发生这种问题的原意是程序中使用了大量的jar或class,使java虚拟机装载类的空间不够,与Permanent Generati ...

  3. Sprng IOC&AOP&事务梳理 （文章整理new）

    IOC <理解 IOC> <IOC 的理解与解释> 正向控制:传统通过new的方式.反向控制,通过容器注入对象. 作用:用于模块解耦. DI:Dependency Inject ...

  4. Python Django 路由分发

    mysite1 为一个django工程 cmdb为一个项目 dashboard为一个项目 在mysite1工程下的urls.py中定义如下: from django.conf.urls import ...

  5. python学习之老男孩python全栈第九期_day021知识点总结——包、异常处理

    一. 包 # 把解决一类问题的模块放在同一个文件夹里 -- 包 # 创建目录代码# import os# os.makedirs('glance/api')# os.makedirs('glance/ ...

  6. js中windows的函数(随机数，计时器的实现)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. HTML——基本html标签

    基本html标签 <html> ... </html>  定义HTML文档 <head> ... </head>  文档的信息 <meta /&g ...

  8. rocketmq 控制台 trackType NOT_CONSUME_YET

    1. 问题描述 rocketmq消费者偶有没有收到消息,查看后台, 显示NOT_CONSUME_YET 2. 分析 mq控制台 显示有该条消息数据 只是状态为未消费 那么问题应该出在 消费者一方 诶? ...

  9. JS 写入到文件

    //js写文件 function doSave(value, type, name) { var blob; if (typeof window.Blob == "function" ...

  10. data encryption

    package com.itheima; import java.util.Scanner; /* * 需求:键盘录入数据,要求数据是四位的整数,现需要对数据进行加密,加密规则如下: * 每位数字都加 ...