【AngularJS】—— 8 自定义指令
AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容。 前面提到AngularJS的四大特性: 1 MVC 2 模块化 3 指令 4 双向数据绑定 下面将会介绍如下的内容: 1 如何自定义指令 2 自定义指令的使用 3 自定义指令的内嵌使用
如何自定义指令:
Angular是基于模块的框架,因此上来肯定要创建一个自己的模块:
var myAppModule = angular.module("myApp",[]);
然后在此模块基础上创建指令directive
myAppModule.directive("xingoo",function(){
return{
restrict:'AECM',
template:'<div>hello my directive</div>',
replace:true
}
});
其中,xingoo是我们自定义标签的名字,后面跟着它的方法函数。
函数return了一个键值对组合,其中定义了标签的使用方法、属性等等内容。
那么看看它都定义了哪些内容吧:
1 restrict:定义了标签的使用方法,一共四种,分别是AECM
2 template:定义标签的模板。里面是用于替换自定义标签的字符串
3 replace:是否支持替换
4 transclude:是否支持内嵌
如何使用指令:
上面提到了标签的四种使用方法,即AECM。
A attribute属性:当做属性来使用
<div xingoo></div>
E element元素:当做标签元素来使用
<xingoo></xingoo>
C class类:当做CSS样式来使用
<div class="xingoo"></div>
M comments注释:当做注释使用(这种方式在1.2版本下亲测不可用!)
<!-- directive:xingoo -->
<div></div>
一般来说推荐,当做属性和元素来使用。
当想要在现有的html标签上扩展属性时,采用属性的方式。
当想要自定义标签时,采用标签的形式。
想要使用那种方式,必须要在定义directive中的restrict里面声明对应的字母。
指令的内嵌使用:
因为标签内部可以嵌套其他的标签,因此想要在自定义标签中嵌套其他的元素标签,则需要:
1 使用transclude属性,设置为true。
2 并使用ng-transclude属性,定义内部嵌套的位置。
代码如下:
myAppModule.directive("test",function(){
return{
restrict:'AECM',
transclude:true,
template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
}
});
全部代码
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<xingoo></xingoo>
<div xingoo></div>
<div class="xingoo"></div>
<!-- directive:xingoo -->
<div></div>
<hr>
<xingoo>3333</xingoo>
<hr>
<test>4444</test>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.directive("xingoo",function(){
return{
restrict:'AECM',
template:'<div>hello my directive</div>',
replace:true
}
});
myAppModule.directive("test",function(){
return{
restrict:'AECM',
transclude:true,
template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
}
});
</script>
</body>
</html>
运行结果
- 16(03)总结增强for循环,静态导入,可变参数
- 基于 React + Webpack 的音乐相册项目(下)
- 通过图表简化sql语句的表关联(r4笔记第70天)
- 通过编程控制CPU利用率(r4笔记第69天)
- Java基础(01)-15总结对象数组,集合Collection,集合List
- 【专业技术】Android内存泄漏简介
- 设计模式之工厂方法(r4笔记第89天)
- delete相关的pl/sql调优(r4笔记第87天)
- Java文件上传与下载【面试+工作】
- QBC查询
- 一条delete语句的调优(r4笔记第86天)
- Java支付宝接口开发【面试+工作】
- 03.SVN检出/解决冲突/提交
- Spring思维导图,让Spring不再难懂(mvc篇)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- sql语句查oracle版本号
- 商业鬼才教你 模板方法模式
- 用SQL语句查看Oracle数据表的结构信息
- Oracle建表语法
- 剑指Offer第1题详解(附Java、Python实现代码)
- (美团)动态规划,打家劫舍!
- POIEasyExcel
- 剑指Offer第2题详解(附Python、Java代码实现)
- 剑指Offer第3题详解(附Java、Python源码)
- 从String中移除空白字符的多种方式!?差别竟然这么大!
- Stack.peek() 与 Stack.pop() 的区别
- 傅里叶变换有什么用?
- 剑指Offer第4题详解(附Java、Python源码)
- 帅地问我:Dubbo服务调用过程
- 用两个栈实现队列详解(附Java、Python源码)——《剑指Offer》