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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
webpack的pitching loader详解
Sep 23 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获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
jQuery 选择器详解
2015/01/19 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
python简单程序读取串口信息的方法
2015/03/13 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
Python断言assert的用法代码解析
2018/02/03 Python
一百行python代码将图片转成字符画
2021/02/19 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
办公室主任主任岗位责任制
2014/02/11 职场文书
质量标语大全
2014/06/12 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
冰峪沟导游词
2015/02/09 职场文书
外贸英文求职信范文
2015/03/19 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书