Angular用来控制元素的展示与否的原生指令介绍


Posted in Javascript onJanuary 07, 2015

在Angular的原生指令中有这几个指令用来控制元素的展示与否,ng-show/ng-hide/ng-if和ng-switch。

在angular性能优化中,我们也常常会用到它。

我们看下他们的区别。

其中ng-show和ng-hide是一样的,只不过ng-show是满足条件就展示,ng-hide是满足条件就隐藏,下面就不再提到ng-hide。

Angular用来控制元素的展示与否的原生指令介绍

ng-show
ng-show接收的一个bool值,当为true的时候就会被触发去展示DOM节点。当ng-show的值为false的时候,在DOM节点上添加了一个ng-hide的一个类,这个类的表达式就是“display:none”。DOM load的时候ng-show里面的所有节点都会被加载。也就是说,ng-show仅仅是影藏和显示了DOM节点。也就意味如果油太多的ng-show指令,即使他们不显示,但他们所在的DOM节点还是会被渲染的。

ng-if
ng-if也接收的一个bool值,当它的值为false的时候,它所控制的节点并没有被创建或者说之前的DOM节点会被销毁掉,哪怕这个节点里面包含了很多ng的绑定都不会去执行。所以,我们在项目开发中,如果没有必要一次性加载完的dom就可以用ng-if来阻止ng事件发生,从而也就加快了dom的加载速度。特别是在repeat的时候,每条数据又包含了复杂的数据结构的时候效果特别明显。当它的值为true的时候,就会去创建DOM节点。

所以如果你用指令、模板来渲染额外的信息,例如通过点击来显示列表项的详细信息,一定要使用  ng-if(AngularJSv. 1.1.5以后)。它可阻止渲染(与ng-show相比)。

ng-switch
ng-switch的存在,让我们省去很多麻烦(应该说angular本身就这样)。比如我们之前用传统的方式去做一个tab选项卡。我们要一次次的循环然后在判断当前的状态最后再去执行相应的事情。在angular里面用ng-switch就非常的简单。ng-switch要先监听某一个变量,当此变量为什么值的时候下面就显示什么内容。如上面显示的,监听了type这么一个变量,当type的值等于‘aaa'的时候这块区域就会被创建并显示;当type的值等于‘bbb'的时候,之前'aaa'的dom全部会被销毁,然后'bbb'dom全部创建并显示。

例子 http://jsbin.com/hinehi/1/edit

Javascript 相关文章推荐
javascript之Partial Application学习
Jan 10 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jQuery中children()方法用法实例
Jan 07 #Javascript
angular.element方法汇总
Jan 07 #Javascript
jQuery中slice()方法用法实例
Jan 07 #Javascript
angularJS中$apply()方法详解
Jan 07 #Javascript
jQuery中not()方法用法实例
Jan 06 #Javascript
jQuery中has()方法用法实例
Jan 06 #Javascript
jQuery中map()方法用法实例
Jan 06 #Javascript
You might like
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
一个超级简单的python web程序
2014/09/11 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
Python线程同步的实现代码
2018/10/03 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
python中树与树的表示知识点总结
2019/09/14 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
python识别验证码的思路及解决方案
2020/09/13 Python
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
竞选部长演讲稿
2014/04/26 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
小组名称和口号
2014/06/09 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
小学生暑假生活总结
2015/07/13 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers