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和jQuery的片段分享
Aug 23 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 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
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
js面向对象的写法
2016/02/19 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python 26进制计算实现方法
2015/05/28 Python
python 用下标截取字符串的实例
2018/12/25 Python
学习和使用python的13个理由
2019/07/30 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
销售总监岗位职责
2014/01/04 职场文书
销售演讲稿范文
2014/01/08 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
学习方法演讲稿
2014/05/10 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server