angularjs 自定义指令的分类

Angular 自定义指令主要有两种：组件型指令和装饰器型指令。

1.组件型指令

   组件型指令是小型的，自封装和内聚的一个整体，它包含业务所需要显示的视图以及交互逻辑。

 

   组件型指令的写法通常是这样的：

   //声明一个指令

   Angular.module(‘moduleName’).directive(‘directiveName’,function(){

 

      Return {

       //可以用作html元数，也可以用作html属性

      Restrict:  ‘EA’,

      //使用独立作用域

      Scope: {configure: ‘=’},

      //指定模板

      templateUrl: ‘XXXX.html’,

      //声明指令控制器

      Controller: function functionName($scope){

       ………………

      }

   };

})

 

指令中return的这个结果，我们成为“指令定义对象”。

 

 Restrict：用来表示这个指令的应用方式，它的取值可以是E（元素），A（属         性），C（类名），M（注释）这几个字母的任意组合，实际开发中常用E,A,EA这三个。对于组件型指令来说，标准用法是E，但是为了兼容IE8，通常也支持A。

 

Scope:有三种取值如下：

例子如下：

{

       //绑定字面量

       name：‘@’，

       //绑定表达式

       detailas：‘=’，

       //绑定事件

       onUpdate：‘&’,

}

这里我们绑定了三个属性，以<user-details  name=’test’  details=’details’  on-update=’updateIt(times)’></user-details >为例。name的值将被绑定为字符串‘test’,而details的值不是‘details’，而是绑定到父页面scope上名为details的变量，当父页面的scope的details变量变化时，指令中的值也会变化。而onUpdate绑定的是一个回调函数，它是父页面scope上一个名为updateIt的函数，当指令代码中调用scope.onUpdate()的时候，父页面scope的updateIt函数就会被调用。

 

Controller：对于组件型指令，更重要的是内容信息的展示，所以我们一般不涉及指令的link函数，而应该尽量地将业务逻辑放置在controller函数中。

 

2.装饰器型指令

对于装饰器型指令，其定义方式如下：

 

angular.module(‘moduleName’).directive(‘directiveName’,function(){

     return{    

         //用作属性

         restrict：‘A’，

         //声明指令link函数

         Link：function(scope,element,attrs){

                  ……..

}

};

});

装饰器指令主要用于添加行为和保持View和Model的同步，所以它不同于组件型指令，我们经常需要进行DOM操作。其restrict属性通常为A，也就是属性声明方式，这种方式更符合装饰器的语义：它并不是一个内容的主体，而是附件行为能力的连接器。装饰器型指令通常不使用新作用域和独立作用域。访问绑定的属性，来看下前面的例子：<user-details  name=’test’  details=’details’  on-update=’updateIt(times)’></user-details >，现在不使用独立的作用域。

 

对于@型绑定，我们可以直接通过attrs取到它。attrs.name等价于name：@。

对于=型绑定，我们可以通过scope.$eval取到它。scope.$eval(attrs.details)等价于detail：‘=’。

对于&型绑定，我们也是通过scope.$eval取到它。scope.$eval(attrs.onUpdate，{times：3})等价于 onUpdate：‘&’。