自定义指令

自定义指令

angular.module('com.ngnice.app').directive('jobCategory'),function(){

    return{

        restrict : 'EA'  ,          //指令的应用方式

         replace： true  ,//替换掉我们自定义的directive

       transclude ：true ,  //处理自定义指令中的子标签

        scope : { }    ,             //使用独立作用域

        templateUrl : ' '   ,    //指定模版(引入外部文件)

        template : ' '   ,         //指定模版

       　controller : function($scope){  } ,

       require : ' ngModel ' , //这个元素上必须有一个ng-model属性，如果没有，会报错

               // 链接，当前指令初始化的时候被自动执行

       link : function(scope, element, attrs，ngModel /* 传入require的值 */ ){

              //创建子作用域

              var subScope = scope.$new(true);

              //操作当前元素

              element.on('click', function(){})

              //操作元素上的值

              attrs

              }

       priority : 2000 ,   //提高优先级

       //编译

       compile : function(){}

     }                                                                                              

}

 

属性	属性值	说明
restrict	E  元素 A  属性 C  类名 M  注释	restrict的取值可以是EACM这几个字母的任意组合，常用的是 E、A
scope	不指定（undefind）/false : 不需要新作用域 true  : 需要一个新作用域，如果没有，创建一个 哈希对象{ } ： 需要一个独立的（isolated）作用域	哈希对象的内容 : { //绑定字面量 Name : '@',   取值方式：attrs.name //绑定变量    Details : '=',   取值方式：scope.$eval(attrs.details) //绑定事件 onUpdate : '&'   取值方式：scope.$eval(attrs.onUpdate,{ times : 3 })                   onUpdate中可以使用的参数名跟参数值都来自这个参数表  }
模版	templateUrl ：指定模版(引入外部文件) template : 指定模版
controller		直接写函数或引进外部controller
transclude	true false	transclude主要完成以下工作，取出自定义指令中的内容(就是写在指令里面的子元素)，以正确的作用域解析它,然后再放回指令模板中标记的位置(通常是ng-transclude标记的地方) eg: 1）自定义指令     2）html代码     3）页面输出及编译后的html结构

 

1、组件型指令

通常的写法：