Angular的自定义指令以及实例


Posted in Javascript onDecember 26, 2016

前面的文章介绍了很多angular自带的指令,下面我们看看如何使用directive自定义指令。

先看一个例子:

<body>
 <div my-hello></div>
</body>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.directive('myHello',function(){
 return {
 restrict : 'A',
 replace : true,
 template : '<div>hello angular</div>'
 };
});
</script>

1:我们定义了一个my-hello的指令。

2:使用directive完善这个指令,返回一个对象。有三个值:

   a) :restrict共四个值:E:标签指令,C:class指令,M:注释指令,A:属性指令

如何使用 ?

Angular的自定义指令以及实例

   b):replace是否替换(M注释必须为true才能解析)看图:

true:Angular的自定义指令以及实例

false:Angular的自定义指令以及实例

     c):template内容,除此之外还有templateUrl,指定一个html模板文件。

下面再举个例子:

<div ng-controller="Aaa">
 <div my-tab my-id="div1" my-name="name" my-fn="show(num)" class="J-tab"></div>
 <div my-tab my-id="div2" my-name="name" my-fn="show(num)" class="J-tab"></div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
 $scope.name = 'xiecg';
 $scope.age = 18;
 $scope.show = function(num){
 console.log(num);
 };
}]);
m1.directive('myTab',function(){
 return {
 restrict : 'ECMA',
 replace : true, //替换的方式插入内容//绑定策略
 scope : {
  myId : '@', //解析普通字符串
  myName : '=', //解析数据
  myFn : '&' //函数
 },
 controller : ['$scope',function($scope){
  //共享数据存放在这里
  $scope.name = 'this is a xiecg';
 }],
 template : '<div id="{{myId}}">\
   <input type="button" value="1" class="active" ng-click="myFn({num:456})">\
   <input type="button" value="2">\
   <input type="button" value="3">\
   <div style="display:block;">{{myName}}</div>\
   <div>2222</div>\
   <div>3333</div>\
  </div>'
 };
});
</script>

1:scope默认是false,为true表示独立作用域。

2:scope给予一个对象时,表示执行绑定策略,在template上调用这些数据。

a):我们在DOM元素上my-id,我们使用@符号,表示解析普通字符串,说白了就是你写什麽就是什麽。

b):使用=符号,表示解析数据。

c):使用&符号,表示这绑定一个函数。

3:controller,表示绑定指令内部使用的数据。

Angular的自定义指令以及实例

好,下面来继续完善这个tab切换的例子!

完整代码:

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Tab选项卡实例</title>
<style type="text/css">
 .J-tab .active{background-color:#03A9F4;}
 .J-tab div{display:none;}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="Aaa">
 <my-tab my-id="div1" my-data="sports" class="J-tab"></my-tab>
 <my-tab my-id="div2" my-data="time" class="J-tab"></my-tab>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
 $scope.sports = [
 {title : '篮球',content : '111111111'},
 {title : '足球',content : '222222222'},
 {title : '排球',content : '333333333'}
 ];
 $scope.time = [
 {title : '上午',content : '444444444'},
 {title : '中午',content : '555555555'}
 ];
}]);
m1.directive('myTab',function(){
 return {
 restrict : 'E',
 replace : true,
 scope : {
  myId : '@',
  myData : '='
 },
 controller : ['$scope',function($scope){
  $scope.name = 'this is a xiecg';
 }],
 template : '<div id="{{myId}}">\
   <input ng-repeat="data in myData" type="button" ng-value="data.title" ng-class="{active:$first}">\
   <div ng-repeat="data in myData" ng-style="{display:$first?\'block\':\'none\'}">{{data.content}}</div>\
  </div>',
 link : function(scope,element,attr){
  element.on('click','input',function(){
  var self = $(this) , i = self.index();
  self.addClass('active').siblings('input').removeClass('active');
  self.siblings('div').eq(i).show().siblings('div').hide();
  });
 }
 };
});
</script>
</body>
</html>

link属性,表示当directive被angular编译后,执行该方法。这个方法接受三个参数,

a):scope表示controller下面的数据。

b):element表示当前的DOM元素。

c):attr表示这个DOM元素上的自定义属性。

补充:

在实际的开发过程中我们往往需要嵌套各种组件和指令。下面来介绍directive中的transclude和require。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>自定义指令间的互相交互</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div>
 <hello>
 <hi></hi>
 </hello>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.directive('hello',function(){
 return {
 restrict : 'E',
 replace : true,
 transclude : true, //允许自定义指令的嵌套,通过ng-transclude指定嵌套的范围
 controller : function($scope){
  $scope.name = 'xiecg';
  this.name = 'xiecg'; //使用this共享给其他指令
 },
 template : '<div>hello angular <h1 ng-transclude></h1></div>'
 };
});
m1.directive('hi',function(){
 return {
 restrict : 'E',
 replace : true,
 require : '^hello',//hello指令属性hi指令的父级,需要用^符号指定。如果无法指定,使用?容错处理。
 template : '<span>hi angular {{name}}</span>',
 link : function(scope,element,attr,reController){
  console.log(reController); //得到父级hello指令中共享出来的数据
 }
 };
});
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JQUERY 浏览器判断实现函数
Aug 20 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
javascript对象的相关操作小结
May 16 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
小程序实现密码输入框
Nov 16 Javascript
如何提高javascript加载速度
Dec 26 #Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 #Javascript
javascript实现去除HTML标签的方法
Dec 26 #Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 #Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 #Javascript
原生JS下拉加载插件分享
Dec 26 #Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 #Javascript
You might like
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
PHP常用数组函数介绍
2014/07/28 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
php实现中文转数字
2016/02/18 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
python抓取需要扫微信登陆页面
2019/04/29 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
python科学计算之narray对象用法
2019/11/25 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
Python devel安装失败问题解决方案
2020/06/09 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
python从PDF中提取数据的示例
2020/10/30 Python
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
活动策划邀请函
2014/02/06 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
师德师风承诺书
2014/05/23 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android