在使用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. 03-Tomcat服务器

    一.Java分类 JavaSE Java的标准版,一般用来开发桌面应用程序, 但是在开发桌面应用程序上相对VB,Delphi,VC++并没有什么优势. JavaEE 也就是Java Enterpris ...

  2. oracle ROW_NUMBER() OVER (PARTITION BY COL1 ORDER BY COL2)

    工作中遇到的一个问题,需要对某列进行分组排序,取其中排序的第一条数据项 用到了ROW_NUMBER() OVER(PARTITION BY COL1 ORDER BY COL2)来解决此问题. 实例准 ...

  3. [LeetCode]Maximum Subarray题解

    Maximum Subarray: Find the contiguous subarray within an array (containing at least one number) whic ...

  4. Q：java中的泛型数组

     对于java,其是不支持直接创建泛型数组的.当采用如下的方式去创建一个泛型数组时,其会出现错误,编译无法通过的情况. package other.jdk1_5; /** * 该类用于演示泛型数组的创 ...

  5. JavaWeb中监听器

     一.事件源:三大域! ServletContext 生命周期监听:ServletContextListener,它有两个方法,一个在创建时调用,一个在销毁时调用: void contextIniti ...

  6. csharp: string Encoding

    /// <summary> /// 中文转unicode /// </summary> /// <param name="str"></p ...

  7. 【转载】MySQL数据库可以用任意ip连接访问的方法

    通过CMD命令行修改数据库表的一个字段的值,实现连接,访问. 第一步.找到MYSQL软件安装所在的bin目录: (1)cd\当前目录 (2)指定MYSQL安装的bin目录 (3)输入 -h local ...

  8. C++ Knowledge series 1

    Programming language evolves always along with Compiler's evolvement. 1. The C++ Object Model: Strou ...

  9. hustoj搭建--常见问题

    环境: Centos6.5   apache2+PHP5+MySQL 设置apache服务器网站根路径(设置之后可通过IP访问OJ) 1. 进入目录/etc/httpd/conf下的httpd.con ...

  10. Flutter知识点:数据存储之sqflite

    sqflite是一款轻量级的关系型数据库,类似SQLite. 在Flutter平台我们使用sqflite库来同时支持Android 和iOS. 使用介绍 1.首选需要在pubspec.yaml 导入库 ...