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 相关文章推荐
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
微信小程序 form组件详解
Oct 25 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
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 验证码制作(网树注释思想)
2009/07/20 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
javascript 页面只自动刷新一次
2009/07/10 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
家佳咖啡店创业计划书
2013/12/27 职场文书
初三政治教学反思
2014/01/30 职场文书
转预备党员政审材料
2014/02/06 职场文书
公司合作协议范文
2014/10/01 职场文书
2014年项目工作总结
2014/11/24 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL