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之自定义指令学习笔记的更多相关文章
- Angular.js之内置过滤器学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- angular.js创建自定义指令-demo3
html: <!doctype html><html ng-app="myModule"> <head> <meta charset=&q ...
- 推荐 15 个 Angular.js 应用扩展指令(参考应用)
几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...
- 《JS高程》事件学习笔记
事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...
- Vue.js:自定义指令
ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...
- Angular.js之指令学习笔记
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- Angular.js之服务与自定义服务学习笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Angularjs之directive指令学习笔记(二)
1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...
- angular这个大梗的学习笔记
angular定义一个模块(module)及控制器(controller)的局部声明方法: var app=angular.module("Myapp",[]); myapp.co ...
随机推荐
- Python3基础 setdefault() 根据键查找值,找不到键会添加
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
- Python3基础 使用id() 查询变量的存储位置
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
- 使用UTF8-CPP转换unicode编码 附录:UTF8和UTF16和UTF32和Unicode编码
本文用于解决如何用C++处理字符串的编码格式.本文采用的是成熟便捷的UTF8库来处理这个问题.首先是下载UTF8库,网址为:http://utfcpp.sourceforge.net/ 为了方便后续使 ...
- object-c中的BOOL类型
object-c中的布尔类型比C语言中的bool类型早了10年,它具有YES和NO两种值.在object-c中的布尔类型BOOL实际上是一种带符号的字符类型(signed char),它使用的空间是1 ...
- Subpub 订阅/发布
var Pubsub = (function (window) { window.handlers = {}; var o = { pub: function () { var args = Arra ...
- Mybatis学习(7)spring和mybatis整合
整合思路: 需要spring通过单例方式管理SqlSessionFactory. spring和mybatis整合生成代理对象,使用SqlSessionFactory创建SqlSession.(spr ...
- 怎么使用OCR文字识别软件图像压缩功能
ABBYY FineReader是一款非常实用的OCR文字识别软件,在使用ABBYY FineReader保存文档时可以选择图像格式和压缩方法,通过图像压缩可以减小文件的大小,图像压缩方法视压缩率和数 ...
- SQL查询根节点
/* 标题:查询指定节点及其所有父节点的函数 作者:爱新觉罗.毓华(十八年风雨,守得冰山雪莲花开) 时间:2008-05-12 地点:广东深圳 */ create table tb(id varcha ...
- jQuery表单对象属性过滤选择器
jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"> <input type="text" ...
- ZXing 生成、解析二维码图片的小示例
概述 ZXing 是一个开源 Java 类库用于解析多种格式的 1D/2D 条形码.目标是能够对QR编码.Data Matrix.UPC的1D条形码进行解码. 其提供了多种平台下的客户端包括:J2ME ...