angular的directive的属性和用法

 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表达式转换成一个函数

}

<hello-waa colora='color'></hello-waa> 

app.directive('helloWaa',function(){
    return {
       scope:{colora:'='},//和属性值一致   绑定的是属性值
       restrict: 'AE',
       replace: true,
       template: '<div style="background-color:{{color}}">Hello World<div><input type="text" ng-model="color"></div></div>'      
    }
});

 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的第四个参数;

      那么,如果将?和^结合起来,我们就可以既指定上游指令,又可以在找不到时,不抛出严重的错误

resultCtrl控制器列表,require注入的控制器

link:function(scope,element,attrs,resultCtrl){

angular.element(document.querySelector('#minor')).on('click',resultCtrl[1].reduceCount);

//resultCtrl[0]就是?^add,

//resultCtrl[1]就是?^minor,

}



猜你喜欢

转载自blog.csdn.net/qq_23114525/article/details/51328953
今日推荐