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 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
H5实现仿flash效果的实现代码
2017/09/29 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
python获取中文字符串长度的方法
2018/11/14 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
Python将字典转换为XML的方法
2020/08/01 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
工作时间调整通知
2015/04/24 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
HTML中的表格元素介绍
2022/02/28 HTML / CSS