angular的directive的属性和用法
2016-05-06 09:54
555 查看
app.directive('datetimepicker',function(){
return {
restrict : 'A',
scope :true,
link: function (scope, element, attrs) {}
})
restrict
//E:表示该directive仅能以element方式使用,即:<my-dialog></my-dialog>
//A: 表示该directive仅能以attribute方式使用,即:<div my-dialog></div>
//C:样式,即:<div class="my-dialog:product"></div>
//M:注释,即<!--directive:my-dialog:product-->
//可以简单理解为,当directive被angular 编译后,执行该方法
scope
//scope 当你写上该属性时,就表示这个directive不会从它的controller里继承$scope对象,而是会重新创建一个。
//scope的属性简洁但语法复杂,你可以用符号例如:&,@ 和=来定义属性的绑定方式。
使用
@ 绑定父级作用域]监测属性的结果。eg:scope:{note:'@'}
是在属性里解析表达式的,也构建了一个可重用的功能表达式构造器会生成了一个依赖父级scope的方法。你可以随时执行他,甚至可以监测到输出的变化。
使用
= 设置 本地scope与父级scope间的双向数据绑定。
template:'{{note()}}'
link:function(scope,element,attrs){
var parentGet=$parse(attrs.a);//$parse 将一个AngularJS表达式转换成一个函数
}
link
//element简单说就是$('my-dialog')
//attrs是个map,内容是你这个directive上的所有属性
//someCtrl,最后一个就是通过require获取的controller的名字,内部控制器
link:function(scope,element,attrs){
attrs.$observe('a',function(){ //检测属性的变化
});
}
?require选项的值可以分别用前缀?、^ 和?^进行修饰,也可以不修饰。相当于注入控制器
如果不进行修饰,比如require:'thisDirective',那么require只会在当前指令中查找控制器
如果想要指向上游的指令,那么就是用^进行修饰,比如require:'^parentDirective',如果没有找到,那就会抛出一个错误。
如果使用?前缀,就意味着如果在当前指令没有找到控制器,就将null作为link的第四个参数;
那么,如果将?和^结合起来,我们就可以既指定上游指令,又可以在找不到时,不抛出严重的错误
link:function(scope,element,attrs,resultCtrl){
}
return {
restrict : 'A',
scope :true,
require:[
'?^add'
,
'?^minor'
],
link: function (scope, element, attrs) {}
})
restrict
//E:表示该directive仅能以element方式使用,即:<my-dialog></my-dialog>
//A: 表示该directive仅能以attribute方式使用,即:<div my-dialog></div>
//C:样式,即:<div class="my-dialog:product"></div>
//M:注释,即<!--directive:my-dialog:product-->
//可以简单理解为,当directive被angular 编译后,执行该方法
scope
//scope 当你写上该属性时,就表示这个directive不会从它的controller里继承$scope对象,而是会重新创建一个。
//scope的属性简洁但语法复杂,你可以用符号例如:&,@ 和=来定义属性的绑定方式。
使用
@ 绑定父级作用域]监测属性的结果。eg:scope:{note:'@'}
是在属性里解析表达式的,也构建了一个可重用的功能表达式构造器会生成了一个依赖父级scope的方法。你可以随时执行他,甚至可以监测到输出的变化。
使用
= 设置 本地scope与父级scope间的双向数据绑定。
template:'{{note()}}'
link:function(scope,element,attrs){
var parentGet=$parse(attrs.a);//$parse 将一个AngularJS表达式转换成一个函数
}
link
//element简单说就是$('my-dialog')
//attrs是个map,内容是你这个directive上的所有属性
//someCtrl,最后一个就是通过require获取的controller的名字,内部控制器
link:function(scope,element,attrs){
attrs.$observe('a',function(){ //检测属性的变化
});
}
?require选项的值可以分别用前缀?、^ 和?^进行修饰,也可以不修饰。相当于注入控制器
如果不进行修饰,比如require:'thisDirective',那么require只会在当前指令中查找控制器
如果想要指向上游的指令,那么就是用^进行修饰,比如require:'^parentDirective',如果没有找到,那就会抛出一个错误。
如果使用?前缀,就意味着如果在当前指令没有找到控制器,就将null作为link的第四个参数;
那么,如果将?和^结合起来,我们就可以既指定上游指令,又可以在找不到时,不抛出严重的错误
link:function(scope,element,attrs,resultCtrl){
angular.element(document.querySelector(
'#minor'
)).on(
'click'
,resultCtrl[1].reduceCount);
//resultCtrl[0]就是?^add,
//resultCtrl[1]就是?^minor,
}
相关文章推荐
- angular input file 上传文件
- AngularJS学习记录-过滤器(自定义过滤器)
- AngularJS学习记录-过滤器(匹配方式过滤)
- AngularJS学习记录-过滤器(排序方式过滤)
- AngularJS学习记录-过滤器(基本使用)
- Angularjs学习笔记--ui-Router
- AngularJS所有版本下载地址
- AngularJS所有版本下载地址
- AngularJS所有版本下载地址
- Angularjs基础(十二)
- angularjs中工具方法的学习和使用
- angularJs-route路由详解
- AngularJS指令进阶 – ngModelController详解
- angularjs中循环定时器的三种方法
- AngularJS简介
- Angular中的内置指令和自定义指令
- angularjs中ngModelController学习
- angular+selecte2(angular ng-repeat渲染)
- js调用angularjs的函数
- angularJs中的form指令的使用