AngularJS  自定义指令详解及实例代码


Posted in Javascript onSeptember 14, 2016

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>',
     repalce:true
    }
   });

其中,xingoo是我们自定义标签的名字,后面跟着它的方法函数。

函数return了一个键值对组合,其中定义了标签的使用方法、属性等等内容。

那么看看它都定义了哪些内容吧:

1 restrict:定义了标签的使用方法,一共四种,分别是AECM

2 template:定义标签的模板。里面是用于替换自定义标签的字符串

3 repalce:是否支持替换

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>',
     repalce:true
    }
   });

   myAppModule.directive("test",function(){
    return{
     restrict:'AECM',
     transclude:true,
     template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
    }
   });
  </script>
 </body>
</html>

运行结果

AngularJS  自定义指令详解及实例代码

以上就是对AngularJS 自定义指令的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
Require.js的基本用法详解
Jul 03 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 #Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 #Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 #Javascript
AngularJS equal比较对象实例详解
Sep 14 #Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 #Javascript
AngularJS $injector 依赖注入详解
Sep 14 #Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 #Javascript
You might like
AM/FM收音机的安装与调试
2021/03/02 无线电
php调用新浪短链接API的方法
2014/11/08 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
Python开发常用的一些开源Package分享
2015/02/14 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python subprocess库的使用详解
2018/10/26 Python
python监控nginx端口和进程状态
2019/09/06 Python
Python numpy数组转置与轴变换
2019/11/15 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
柏林通行证:Berlin Pass
2018/04/11 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
幼儿园小班植树节活动方案
2014/03/04 职场文书
市场拓展计划书
2014/05/03 职场文书
入职担保书怎么写
2014/05/12 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
考试作弊检讨书
2014/10/21 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
5行Python代码实现一键批量扣图
2021/06/29 Python
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python
Java界面编程实现界面跳转
2022/06/16 Java/Android