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 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
vue.js实例todoList项目
Jul 07 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
JS代码简洁方式之函数方法详解
Jul 28 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
调整PHP的性能
2013/10/30 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
JS延时提示框实现方法详解
2015/11/26 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
借款协议书
2014/04/12 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
2019年教师入党申请书
2019/06/27 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
详细总结Python常见的安全问题
2021/05/21 Python