在使用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. Hunger Snake3

  2. 使用命令行编译打包运行自己的MapReduce程序 Hadoop2.6.0

    使用命令行编译打包运行自己的MapReduce程序 Hadoop2.6.0 网上的 MapReduce WordCount 教程对于如何编译 WordCount.java 几乎是一笔带过… 而有写到的 ...

  3. docker login 报错 Error response from daemon: Get https://registry-1.docker.io/v2/: unauthorized: incorrect username or password

    按照网上说的说法,造成这个现象有很多原因,大家可以多尝试一下,下面贴出解决我问题的方法: docker账户分为两个部分,一个是email,一个是dockerID,使用docker login登陆时要使 ...

  4. git杂记-分支简介

    分支创建 //只创建分支不切换: $ git branch testing //创建并切换分支$ git checkout -b iss53 查看各个分支的指向对象 $ git log --oneli ...

  5. Struts22222

    一,什么是框架?  所谓框架就是提供了一组统一的接口和编程方式的可以重用组件,同时我们可以在框架中扩充我们自己的特定逻辑. 二,MVC设计模式 将应用程序分为3个部分:模型 Model,视图View, ...

  6. C++学习笔记(5)----重载自增自减运算符

    自增运算符“++”和自减运算符“--”分别包含两个版本.即运算符前置形式(如 ++x)和运算符后置形式(如 x++),这两者进行的操作是不一样的.因此,当我们在对这两个运算符进行重载时,就必须区分前置 ...

  7. Android碎笔录1——基本布局

    刚开始学Android开发的时候,没有H5的基础总是分不清android布局文件的用法,真正要学会android布局还是得实战一次,下面不多说,直接上代码. 这是一个登陆界面,LinerLayout嵌 ...

  8. 《深入理解JVM》第二章读书笔记

    Java内存区域与内存溢出异常 运行时数据区域 JVM执行java程序的时候有一个运行时数据区,每个区域有自己的作用,了解这些区域有助于我们理解JVM.JVM运行时数据区如图所示: 程序计数器 该区域 ...

  9. QTreeView/QTableView中利用QStandardItem实现复选框三种形态变化

    https://www.techieliang.com/2017/12/729/ 原文地址 using_checkbox_item.h /** * @file using_checkbox_item. ...

  10. Xshell启动时显示丢失MSVCP110.dll

    重装系统,装完Xshell5启动时,出现丢失MSVCP110.dll文件 这种情况不要相信网上所说的什么下载“MSVCP110.dll”文件或者下载微软的vcredist 2012 这样没用 正确的姿 ...