Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)?
What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法、定义行为绑定数据等。
Why: 最大程度减少DOM操作,实现数据绑定,与业务逻辑进行交互。
How: 指令主要分为两种:内置指令和自定义指令,通过下面的例子,简单记录一下如何去使用。
内置指令
在官方API文档上罗列了很多指令,内置指令可以分为:普通指令 和 事件指令,他们都是作用于HTML之上的,通过添加属性的方式来实现的。简单看一下一些常用的指令。
普通指令
ngApp指令
ng-app 指令用来设定一个 AngularJS 应用程序的作用范围的根对象上
系统执行时会自动的执行根对象范围内的其他指令
可以在同一个页面创建多个 ng-app 节点(不推荐)
创建多个ng-app时,默认只能执行第一个,后面的需要手动引导:
angular.bootstrap() |
标记的范围尽可能小,性能,区域范围越小,性能会更好。
简单示例:
html结构举例:
<div ng-app='myApp'><!--这个div是程序的最外围DIV,标识着程序的入口> |
对应的javascript结构:
angular.module('myApp',[]); |
备注: 如果给ng-App 赋值如:ng-app='myApp',那么必须要在js中初始化,如: angular.module('myApp',[]) , 不然会报错。
ngController指令
用于将控制层的一个控制器作用到视图层,用于支持MVC开发模式的重要的一个方面。
必须在ngApp指令的范围之内
这条指令创造了一个新的作用域
这条指令,优先级很高。
简单举例:
html结构:
<div ng-app='myApp'> |
javascript结构:
angular.module('myApp',[]) |
ngBind指令
将作用域($scope)中的值绑定到元素的 innerHTML 上,其效果会比通过表达式绑定的方式更友好
用于改进表达式 {{}} 所带来的加载时表达式符号暂时性展现的问题。
简单举例:
html结构
<div ng-app='myApp'> <div ng-controller='myCtrl'> <span ng-bind='username'></span> </div> </div> |
javascript结构
angular.module('myApp',[]) |
ngBindHtml 指令
如果需要在页面上绑定 HTML 内容(比如标签的尖括号,不去转义)。
依赖 ngSanitize 服务,不在核心库中,需要单独引入库文件(angular-sanitize)。
简单示例:
html结构
<div ng-app='myApp'> |
javascript结构
angular.module('bindHtmlExample', ['ngSanitize']) |
ngRepeat 指令
ng-repeat 指令用来遍历一个数组重复创建当前元素
类似于模板引擎中的each
官方的例子涉及的东西很多
举个简单的实例:
html结构
<div ng-app='myApp'> |
javascript结构
angular.module('myApp',[]) }]); |
上面的 track by $index 是有意义的,因为ng-repeat不能遍历重复项,为了避免程序报错,我们加上 track by $index 可以在内部维护一个$index,就不会因为内容重复而报错。
ngClass 指令
ng-class用来给html动态设置css样式。
官网上的demo很不错
简单自己来写一写:
css结构
.red {color: red} html结构 <div ng-app='myApp'> |
javascript结构
var data = [ |
上面功能实现了输入对应的名字,显示红色
总结一下 ng-class的用法 : ng-class={} ,其实就是这样:ng-class={classname1:是否添加-boolean值,classname2:是否添加-boolean值}
另外 还有两个衍生的指令处理奇数和偶数行的样式指令: ngClassEven 和 ngClassOdd
ngCloak 指令
用于阻止html模板短暂性的展示,出现的用户体验问题
它会动态的在head里添加一段css样式
另外最重要的,angular库必须在head中引入!
官网上的demo,还解决了IE7css不兼容的问题。
下面简单写下小demo:
html结构
<!-- 在header里引入包 --> angular.module('myApp', []) |
上面的demo,如果不加ng-cloak指令,那么就会有html模板短暂性的呈现的这个bug,上面我们用了js来阻止了程序的运行,可以看到ng-cloak的作用。
ngShow和ngHide 指令
用于控制页面元素的隐藏和显示
值为boolean类型。
如果是false,就会在页面元素上加上一个类ng-hide用于隐藏元素
举个简单的例子:
html结构
<!--下面是关键代码,不需要javascript结构-->
点击隐藏右侧:<input type='checkbox'
ng-model='checked'>
<span ng-show='!checked'>控制隐藏显示</span>
可见 ngShow 和 ngHide都是一样的,我们可以通过取非的方式只用一个就可以了。
ngIf 指令
ngIf指令完全不同于ngShow或者ngHide ,它控制的是:是否有这个dom元素,而非显示隐藏。
举个小例子
关键代码:
Click: <input type='checkbox' ng-model='checked' ng-init='checked=true' /> |
ngSwitch 指令
根据表达式显示或隐藏对应的部分。
对应的子元素使用 ng-switch-when 指令,如果匹配选中选择显示,其他为匹配的则移除。
可以通过使用 ng-switch-default 指令设置默认选项,如果都没有匹配的情况,默认选项会显示。
on 属性必须和ng-switch一起使用,或者直接使用ng-switch属性。
此指令优先级很高
官网上的小demo分析
html结构
<div ng-app='myApp'> javascript结构 angular.module('myApp', []) |
上面用了ng-option的一个遍历循环。
在 ng-switch作用上的父盒子上动态的绑定了option里的值,只要选择有匹配那么在下面的子盒子就会相应的显示。其中可以使用on或者不使用on,但是ng-switch是必备的,直接用ng-switch='selection' 也可以。
ngHref 和 ngSrc 指令
ng-href / ng-src 指令用于解决当链接类型的数据绑定时造成的加载解析时的bug.因为我们的链接地址都是动态的,我们需要动态的绑定值到src或者href中,src或者href无法解析这样的形式 {{}} 所以就用 ng-src 和 ng-href来使用了。当然还有ng-srcset指令。
其他一些单向数据绑定的指令
ng-checked:单选/复选是否选中,只是单向绑定数据
ng-disabled:是否禁用
ng-readonly:是否只读
ng-selected:是否选中,只是单向绑定数据
事件指令
ng-change:发生改变
ng-copy:拷贝完成
ng-click:单击 ng-click='func()'
ng-dblclick:双击
ng-focus:得到焦点
ng-blur:失去焦点
ng-submit:表单提交
等等其他事件指令,这些事件指令,在事件触发时相应的完成我们赋予的功能。
自定义指令
指令无外乎增强了 HTML,提供额外的功能
以上的指令基本上已经可以满足我们的绝大多数需要了
少数情况下我们有一些特殊的需要,可以通过自定义指令的方式实现。
从更高的层次上说,指令是DOM元素上的一些标记(例如: 属性,元素名称,注释和一些CSS的类)用于转换DOM元素的内部或者对DOM元素进行一些行为上的绑定。
注意事项
自定义指令和自定义控制器都必须要挂载在模块之下。因为自定义指令的directive是angular.module下的一个方法,点击这里查看
具体用法为 angular.module('moduleName',[]).directive(name, directiveFactory);
angular.module 可以使用链式编程的形式,返回模块本身,可定义多个指令。
定义指令的时候用驼峰命名法如:myDirective , 使用的时候用匈牙利命名法:my-directive
自定义指令可以把一段重复使用的方法封装起来,类似封装一些组件来使用。
对return中的一些常用选项的说明
,官方文档的说明(访问不了,可能是因为文档上的路由设置,需要一层层的点进去查看),就不再举例了。
template : 用于将一段自定义的代码绑定到含有对应指令的html中。
templateUrl :
用于将’其他html’文件渲染进入含有对应指令的html中。当然这里的’其他html’里面可以有我们的指令或者表达式,其实就是代码段,和在当前页面一样使用,只是抽离出去了,方便管理。这里会用异步请求的方式来得到这个文件。注意:此处会发送一个xhr请求。
transclude :
值为布尔型,需要在template中添加一个内置指令ng-transclude,将含有这个自定义指令中的内容,放入到template中去渲染,然后放到含有自定义指令的DOM元素内。
replace : 值为布尔型, 开启后就会把含有自定义指令的DOM元素,替换成template中的内容。
scope :
规范指令的作用域的问题,如果没写,ng中默认的是放在根作用域中的,一般每个控制器就会有一个作用域,每个指令也会存在一个作用域,并且作用域存在继承关系,我们为了规范作用域,可以在自定义指令中有一个scope选项,在scope内部定义一些属性。下面是示例代码。
html结构:
<div ng-app='myApp'> javascript结构: angular.module('myApp',[]) |
代码输出 hello world 其中 @ 表示 scope中的属性值,引用了使用自定义指令的DOM元素的属性值。
restrict : 用于指定自定义指令的类型。 A,表示只匹配属性。E,表示只匹配元素。C,表示只匹配类名。AEC,表示三种都可以作为匹配项。而M,匹配注释指令,已经被高版本抛弃使用了,我们推荐使用A和E。
link函数 : angular 中允许在这个内部进行一些dom操作,格式是这样的: link:function(scope, element, attrs){} scope代表的是当前指令的作用域,element代表当前元素,attrs代表元素的属性,在里面用的是jqlite里面的api。备注,如果只去操作dom,那么我们只需要return一个函数就行了,不用 link选项了。
Angular中的内置指令和自定义指令的更多相关文章
- angular中常用内置过滤器
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta ...
- VUE:内置指令与自定义指令
VUE:内置指令与自定义指令 常用的内置指令 1)v:text 更新元素的 textContent 2)v-html 更新元素的 innerHTML 3)v-if 如果为true,当前标签才会输出到页 ...
- JS中的内置对象简介与简单的属性方法
JS中的数组: 1.数组的概念: 数组是在内存中连续存储的多个有序元素的结构,元素的顺序称为下标,通过下标查找对应元素 2.数组的声明: ①通过字面量声明var arr1 = [,,,,] JS中同一 ...
- Linux常用基本命令:三剑客命令之-awk内置变量与自定义变量
AWK中,变量分为两种:内置变量与自定义变量. 常见的内置变量有: FS:输入字段分隔符, 默认为空白字符 OFS:输出字段分隔符, 默认为空白字符 RS:输入记录分隔符(输入换行符), 指定输入时的 ...
- JavaScript(九):JavaScript中的内置对象
一.对象的概念 对象是一种特殊的数据类型(object). 拥有一系列的属性和方法. 分为内置对象和自定义对象. 二.String对象 String对象用来支持对于字符串的处理. 1.属性 lengt ...
- 使用正则表达式来截取nginx中的内置变量
nginx 中的内置变量都可以通过 if 指令 + 正则表达式来进行截取,截取之后的结果通过正则表达式的分组来进行引用 比如:从请求中传过来的一个名为 ssl_client_s_dn 的变量,它的值是 ...
- JavaScript中的内置函数
JavaScript中的内置函数 制作人:全心全意 在使用JavaScript语言时,除了可以自定义函数之外,还可以使用JavaScript的内置函数,这些内置函数是由JavaScript语言自身提供 ...
- Java注解-元数据、注解分类、内置注解和自定义注解|乐字节
大家好,我是乐字节的小乐,上次说过了Java多态的6大特性|乐字节,接下来我们来看看Java编程里的注解. Java注解有以下几个知识点: 元数据 注解的分类 内置注解 自定义注解 注解处理器 Ser ...
- form-create教程:给内置组件和自定义组件添加事件
本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...
随机推荐
- mybatis传入map参数,map中包含list(输入参数)
1.xml中配置: <!-- 根据条件查询满足条件的ID集合开始 --> <select id="getQuestionsIdsForExamPaper" res ...
- 禁用VMware的vmem文件
新建一个虚拟机,VMWare会默认为其创建一个虚拟内存文件*.VMEM, 这个文件会影响系统的磁盘性能,所以最好关闭它. 该当是找到*.vmx文件,在文件最后加入一行 mainMem.useNamed ...
- CodeForces 141E: ...(最小生成树)
[条件转换] 两两之间有且只有一条简单路径<==>树 题意:一个图中有两种边,求一棵生成树,使得这棵树中的两种边数量相等. 思路: 可以证明,当边的权是0或1时,可以生成最小生成树到最大生 ...
- AC日记——传纸条 洛谷 P1006
题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸运的是 ...
- indexOf()、includes()、startsWith()、endsWith()
是否包含字符串三种新方法 传统上,JavaScript只有 indexOf 方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6又提供了三种新方法. includes():返回布尔值,表示是否 ...
- SpringBoot 整合 RabbitMQ(包含三种消息确认机制以及消费端限流)
目录 说明 生产端 消费端 说明 本文 SpringBoot 与 RabbitMQ 进行整合的时候,包含了三种消息的确认模式,如果查询详细的确认模式设置,请阅读:RabbitMQ的三种消息确认模式 同 ...
- Java -----transient 和static
越来越喜欢深究java基础了,讲讲 transient 和static 对序列化的影响.废话少说,直接上代码就可以了 package serializable; import java.io.Ser ...
- 期望DP初步
感觉期望DP这种东西像是玄学- 主要总结说一点基础性的东西, 或许对于理解题目的做法会有一点帮助. 首先是关于独立事件, 互斥事件的概念. 通俗地说, 就是对于两个事件A, B, 假如满足发生了其中一 ...
- mc
Description 小C在MC里有n个牧场,自西向东呈一字形排列(自西向东用1-n编号),于是他就烦恼了:为了控制这n个牧场,他需要在某些牧场上面建立控制站, 每个牧场上只能建立一个控制站,每个控 ...
- Extjs grid增加或删除列后记住滚动条的位置
IE下验证好使. { text: "Del", icon: 'Scripts/Ext/resources/images/icons/application_form_delete. ...