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 相关文章推荐
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
js DOM的学习笔记
2011/12/22 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
分析经典Python开发工程师面试题
2019/04/08 Python
python 字典的打印实现
2019/09/26 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
演讲稿的格式及范文
2014/08/22 职场文书
财务审计整改报告
2014/11/06 职场文书
体育个人工作总结
2015/02/09 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
python执行js代码的方法
2021/05/13 Python
2021年最新用于图像处理的Python库总结
2021/06/15 Python
python游戏开发Pygame框架
2022/04/22 Python