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 相关文章推荐
在JavaScript中获取请求的URL参数
Dec 22 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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
PHP实现服务器状态监控的方法
2014/12/09 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
Python yield使用方法示例
2013/12/04 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
学生请假条格式
2014/04/11 职场文书
法制宣传月活动总结
2014/04/29 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
欢迎领导标语
2014/06/27 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
《观察物体》教学反思
2016/02/17 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
python实现过滤敏感词
2021/05/08 Python