一、介绍

我们之前用到的ng-click、ng-class、ng-show等都是angular的内置指令，我们也可以自定义指令。自定义指令的基本结构如下：

var myApp=angular.module('myApp',[])
.directive('myDirective',function(){ //以下都已myDirective名字为例
    return {
        //在此具体定义指令
    }
});

通过directive方法进行自定义指令，函数返回一个对象，对象中通过设置属性、方法对指令进行具体的定义，下面来介绍一些简单的设置

二、简单自定义指令

1、restrict

restrict共有四个值，分别是E、C、M、A

• E：代表元素element
• C：代表类 class
• A：代表属性attribute
• M：代表注释
  我们可以设置为：
  restrict:'ECA' //这局是设置在上例return返回的对象中的
  这句话的意思是如果html中有一个有一个元素是myDirective，或者class中有myDirective、属性名是myDirective都会执行这个自定义指令
  这里要特别说明一下html中的使用：在js中自定义指令时用驼峰法命名，使用时必须分隔符‘-’进行连接，
  如：

<my-directive>这里是自定义的指令</my-directive>      //对应E
<div class="my-directive">这里是自定义的指令</div>   //对应C
<div my-directive>这里是自定义的指令</div>           //对应A

2、template/templateUrl

看名字就知道这里是一个模板，其实就是一个html代码片段，当遇到自定义指令时我们以什么样的内容来展示这个指令：
template:'<div>哈哈哈，测试，这是一个自定义指令</div>'
如果这个模板的内容比较复杂一些，html内容比较多，我们就可以将它单独放到一个html文件中，用templateUrl属性，值为这个html文件的路径
templateUrl:'template.html' //假设template中的内容也为<div>哈哈哈，测试，这是一个自定义指令</div>
假如这个时候我们只设置了restrict、template/templateUrl两个属性，那么html中的
<my-directive>这里是自定义的指令</my-directive> 最后会成为
<my-directive><div>哈哈哈，测试，这是一个自定义指令</div></my-directive>
此处仅以element为例，class、attribute同理。
我们可以看到html中原来的“这里是自定义的指令”内容没有了

3、transclude

上面我们看到html中原来的内容消失了，利用transclude可以将原先的内容添加的模板中，如：

        template:'<div>哈哈哈，测试，这是一个自定义指令<br/><div ng-transclude></div></div>',
        transclude:true   //默认为false

请注意上面代码的第一行中模板内容有一个带有ng-transclude指令的元素，原来的内容就会被放入这个元素内

4、replace

我们的指令"my-directive"在html中并不符合html规范，而且这也并不是我们想要的内容，我们仅需要模板中的内容，所以可以用replace：true将其去掉，

//自定义指令
        return{
            restrict:'ECAM',
            template:'<div>哈哈哈，测试，replace为true</div>',
            replace:true
        }

    <test-replace>element</test-replace>
    <div class="test-replace">class</div>
    <div test-replace>attribute</div>

最终显示结果

浏览器解析结果

三、总结

• 驼峰命名法，注意在html中调用时要用test-no-replace，分隔符“-”必须要有，否则 E、A解析不出来
• 没有replace或者false，模板的内容会嵌入到标签内，替换原来标签的内容
• replace为true，模板的内容会替换此标签，同时当为C、A时会给模板添加对应的class、attribute
• 当replace为true时，模板中的内容必须包含在一个标签中，例如：如果直接是一个字符串“angular"就会报错
• transclude包含标签原有的数据，将原有的数据嵌入到ng-transclude标签中
  自己动手实践去看看具体的显示结果