Angular.js自定义指令学习笔记实例


Posted in Javascript onFebruary 24, 2017

本文给大家分享angular.js学习笔记之自定义指令实例代码讲解,具体代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularDirective</title>
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
</head>
<body ng-app="angularJS" >
<!-- <div class="self-direct">{{title}}<input type="text" ng-model='title'></div> -->
<!-- <input type="text" ng-model="color">
<self-direct color='{{color}}'></self-direct>
<self-direct m-color='{{color}}'></self-direct> -->
<!-- <input type="text" ng-model="color">
<self-direct color='color'></self-direct>如果采用双向绑定,指令中的属性值默认是变量,所以不用添加{{}}
<self-direct m-color='color'></self-direct> -->
<!-- <self-direct logo='logo()'></self-direct> -->
<!-- <self-direct ></self-direct> -->
<!-- <self-direct ></self-direct> -->
<self-direct title="JinDong" bgcolor="red" fontcolor="#fff"></self-direct>
<script type="text/javascript">
/*Angular.js自定义指令的格式和相关参数与其值:
let m=angular.module('angularJS',[]);
m.directive('selfDirect',[function(){//selfDirect表示自定义指令的名字,采用驼峰命名法,当restrict的值为E的时候:<self-direct></self-direct>
return {
restrict:'A/E/C',//A:Attrabute,E:Elements,C:class;restrict属性表示生成指令在页面中的表现形式,字母必须大写,不建议使用C,因为C的写法与CSS耦合性太强.
template:'<p>template选项表示指令在页面中显示的内容,template的值可以是字符串也可以是HTML的标签形式,也可以为函数,如:template:function(elle,attr){return '<span style="'color:'+attr['color']+'">'+ele.html()+'</span>'},view内容太多的时候不建议使用函数的形式</p>',
replace:true,//使用模板内容替换包含模板内容的父级标签
transclude:true,//其内容填充到ng-transclude指定的位置
templateUrl:'',//不可与template同时使用
scope:true,//默认为false,设置指令的作用域,当值为{}时,模板中的变量不会继承来自控制器中的属性值,
controller:['$scope',function($scope){$scope.data={...}}],//指令中的控制器
link:function(scope,elem,attr){},//用link完成对DOM的操作,scope:指令的作用域,elem:指令标签元素,attr:指令标签元素的属性数组,
};
}])
*/
var m=angular.module('angularJS',[]);
m.directive('selfDirect', [function () {
return {
restrict: 'E',
//template:'<h1><span ng-transclude=""></span>This is a Angular.js direction of self definition</h1><div ng-transclude=""></div>',
//replace:true,
//transclude:true,
//templateUrl:'viewModel.html',
//scope:{},
//template:'{{title}}<input type="text" ng-model="title">', 
//template:'<p style="color:{{color}}">suNing store</p><input ng-model="color">',
//scope:{color:'@mColor'},//控制器和指令隔离作用域@单项文本绑定,控制器可以影响指令中的数据,而指令不能影响控制器中的数据
//scope:{color:'=mColor'},//控制器和指令隔离作用域=双向文本绑定,控制器可以影响指令中的数据,指令也可以影响控制器中的data
//template:'<p>{{logo()}}</p>',
//scope:{logo:'&'},//用&符号调用父控制器中的方法
/*replace:true,
templateUrl:'viewModel.html',
controller:['$scope',function($scope){
$scope.data=[{
id:1,title:'puDong'
},{
id:2,title:'JinDong'
},{
id:3,title:'TianMao'
}];
}],*/
scope:{title:'@'},
link:function(scope,elem,attr){
$(elem).css({
backgroundColor:attr['bgcolor'],
color:attr['fontcolor']
}).html(scope.title);
},
};
}]);
/*m.controller('ctrl',['$scope',function($scope){
$scope.title='SuNing store';
$scope.color='red';
$scope.logo=function(){
return 'TianMao store';
};
}]);*/
</script>
</body>
</html>

以上所述是小编给大家介绍的Angular.js自定义指令的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
js获取 type=radio 值的方法
May 09 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
Three.js基础学习教程
Nov 16 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 #Javascript
JavaScript和jQuery制作光棒效果
Feb 24 #Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 #Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 #Javascript
JavaScript中三种常见的排序方法
Feb 24 #Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 #Javascript
Bootstrap3多级下拉菜单
Feb 24 #Javascript
You might like
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
jQuery.each使用详解
2015/07/07 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
javascript每日必学之循环
2016/02/19 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
python使用turtle绘制分形树
2018/06/22 Python
python实现共轭梯度法
2019/07/03 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
2014年新生军训方案
2014/05/01 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
投标售后服务承诺书
2015/04/29 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
Python实现滑雪小游戏
2021/09/25 Python