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

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

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

我们看下他们的区别。

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

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

赞 (0)

相关推荐

  • angularjs指令中的compile与link函数详解

    angularjs指令中的compile与link函数详解

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 大部分教程只是简单的说下compile会在ng内部用到,而且建

  • AngularJS ng-change 指令的详解及简单实例

    AngularJS ng-change 指令 AngularJS 实例 当输入框的值改变时执行函数: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>

  • 详解AngularJS中自定义指令的使用

    详解AngularJS中自定义指令的使用

    自定义指令中使用AngularJS扩展HTML的功能.自定义指令使用的"指令"的功能定义.自定义指令只是替换了它被激活的元素.引导过程中AngularJS应用程序找到了匹配的元素,并做好使用自定义指令compile()方法一次活动再处理使用基于指令的范围自定义指令link()方法的元素. AngularJS提供支持,以下列元素的类型来创建自定义指令. Element directives - 指令遇到时激活一个匹配的元素. Attribute - - 指令遇到时激活一个匹配的属性. C

  • AngularJS基础 ng-include 指令示例讲解

    AngularJS ng-include 指令 AngularJS 实例 包含 HTML 文件: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>

  • AngularJS入门（用ng-repeat指令实现循环输出

    循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任.有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串,太不直观,有人搞出了js模板,也没好到哪里去. 用AngularJS就爽多了,语法和JSP类似: <!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title&g

  • Angularjs编写KindEditor,UEidtor,jQuery指令

    目前angularJS非常火热,本人也在项目中逐渐使用该技术,在angularJS中,指令可以说是当中非常重要的一部分,这里分享一些自己编写的指令: 注:本人项目中用了oclazyload进行部分JS文件加载 1.KindEditor 复制代码 代码如下: angular.module('AdminApp').directive('uiKindeditor', ['uiLoad', function (uiLoad) {     return {         restrict: 'EA',

  • 整理AngularJS中的一些常用指令

    整理AngularJS中的一些常用指令

    AngularJS指令用于扩展HTML.这些都是先从ng- 前缀的特殊属性.我们将讨论以下指令: ng-app - 该指令启动一个AngularJS应用. ng-init - 该指令初始化应用程序数据. ng-model - 此指令定义的模型,该模型是变量在AngularJS使用. ng-repeat - 该指令将重复集合中的每个项目的HTML元素. ng-app指令 ng-app 指令启动一个AngularJS应用.它定义根元素.它会自动初始化或启动加载包含AngularJS应用程序的Web页

  • 用AngularJS的指令实现tabs切换效果

    用AngularJS的指令实现tabs切换效果

    先来看看效果图 首先先来说一下指令嵌套,指令嵌套顾名思义就是两个以上的指令嵌套在一起,比如下面这样: <A-deirective> <B-directive></B-directive> <C-directive></C-directive> </A-directive> 下面这个tabs功能的指令,刚好用到了这个,可以让代码更加简洁. <!DOCTYPE html> <html lang="en"

  • AngularJS中的指令全面解析(必看)

    AngularJS中的指令全面解析(必看)

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJS这个框架的指令系统,本人也是初学,查阅了一些资料,要是有一些说的不好的地方,万望指出. 指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.那么一个AngularJS指令在HTML代码

  • AngularJS学习笔记之ng-options指令

    1.基本下拉效果(lable for value in array) 其中select标签中的ng-model属性必须有,其值为选中的对象或属性值. <div ng-controller="ngselect"> <p>usage:label for value in array</p> <p>选项,{{selected}}</p> <select ng-model="selected" ng-opti

  • Angular 常用指令实例总结整理

    Angular 常用指令 已经用了angular很久积累了一些很实用的指令,需要的话直接拿走用,有问题大家一起交流 1.focus时,input:text内容全选 angular.module('my.directives').directive('autoselect', [function () { return { restrict: 'A', link: function (scope, element, attr) { if (element.is("input") &

  • 学习AngularJs:Directive指令用法（完整版）

    学习AngularJs:Directive指令用法（完整版）

    本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操作scope.绑定事件.更改样式等.通过这个Directiv

  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

随机推荐