除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
通过 .directive() 函数来添加自定义的指令。
调用自定义指令时，需要在HTMl 元素上添加自定义指令名。
自定义指令命名规则：使用驼峰命名法来命名，即除第一个单词外的首字母需大写。如： myDirective。
在html页面调用该指令时需要以 - 分割，如： my-directive。示例代码：
<body ng-app="myApp"> <my-directive></my-directive> <script> var app = angular.module("myApp", []); app.directive("myDirective", function() { return { template : "<h1>模板：可以写自己的html页面代码</h1>" }; }); </script> </body>
html页面调用自定义指令的四种方式
通过在自定义指令里添加 restrict 属性,根据设置不同的值来决定html页面的调用方式，如：
var app = angular.module("myApp", []); app.directive("myDirective", function() { return { restrict : "A",//只能通过属性调用 template : "<h1>自定义指令!</h1>" }; });
restrict值的不同，决定了调用方式的不同
属性值
调用方式
示例
A （Attribute首字母）
属性名
<div my-directive></div>
C （Class 首字母）
类名
<div></div>
E （Element 首字母）
元素名
<my-directive></my-directive>
M
注释
<!-- 指令: my-directive>
restrict 默认值为 EA, 即在html页面可通过元素名和属性名来调用自定义指令。
自定义指令属性详解
属性
值类型
说明
restrict
string
指令的调用方式，A、C、E、M
priority
number
指令执行的优先级
template
string
指令使用的模板，可将html页面代码写于此。只能与templateUrl二选其一
templateUrl
string
从指定的url地址加载模板。只能与template二选其一
replace
boolean
是否用模板替换当前元素。true : 将指令标签替换成temple中定义的内容,页面上不会再有<my-directive>标签；false ：则append（追加）在当前元素上，即模板的内容包在<my-directive>标签内部。默认false。
transclude
boolean
是否将当前元素的内容转移到模板中
scope
boolean /object
指定指令的作用域。false(默认值): 使用父作用域作为自己的作用域（每个引用自定义指令的标签若其中一个标签改变某一变量值，则会影响其他标签的值 ）。true: 新建一个作用域，该作用域继承父作用域（两个引用自定义指令的标签之间的变量互不影响）。JavaScript对象：与父作用域隔离，并指定可以从父作用域访问的变量
controller
function
定义与其他指令进行交互的接口函数
require
string
指定需要依赖的其他指令
link
function
以编程的方式操作DOM，包括添加监听器等
compile
function
编程的方式修改DOM模板的副本，可以返回链接函数
对表格里的知识进行延伸
1.templateUrl
如果template里拼写的html页面代码十分的多页复杂，拼字符串的话就太麻烦啦，这里我们就可以选择templateUrl。我们可以将要拼写的html页面代码独立到一个页面里，如template.html；然后再指定该html文件所在的路径即可，如templateUrl:”template.html”。用到该自定义指令时，会自动发一个http请求来获取template.html对应的模板内容。这样做的缺点是，多了一个http请求。别急，可以改进的：
angularjs规定了模板还可以用<Script>标签定义：
<script type="text/ng-template"> <div>自定义指令模板用Script标签定义的方式，须放在html页面ng-controller指令所在标签的内部</div> </script>
上面代码写在html页面的ng-controller指令所在标签的里面，这样就不用再去请求它了。示例：