码迷,mamicode.com
首页 > 其他好文 > 详细

angular的directive的属性和用法

时间:2016-05-06 12:28:10      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:

 app.directive(‘datetimepicker‘,function(){
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的directive的属性和用法

标签:

原文地址:http://blog.csdn.net/qq_23114525/article/details/51328953

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!