Angular1创建自定义指令

高能警告：这是一篇面向有Angular1项目基础经验开发者的文章，如果你是在查找directives API,你应该去$compile
API 文档那边。墙那边的传送门：[嗖]
s
(https://docs.angularjs.org/api/ng/service/$compile)

这篇文章会告诉你在你Angular1 app中，如何创建自己的directive以及如何使用这些diretives

什么是directive?
在Angular1的高阶学习中，directives就是DOM元素世界中的创造者（比如：属性/元素名/CSS样式/comment)，directives告诉angular的HTML编译器给这些DOM元素一个定义好的功能（如事件监听）。或者改变DOM元素和其子节点

AngularJS 本身就是一个directives的结合体，比如ngBind,ngModel,ngClass。但是，就跟你去创建services和controllers是一样一样的。大多数的directives你还是得自己动手创建。当AngularJS初始化的你的应用时，HTML编译器就会将directives匹配到对应的DOM元素上去。

‘编译’HTML模板到底是个啥？对于AngularJS 1来说，‘编译’表示把directives贴到HTML上，让它在元素内部产生相应工作。结果就是我们在使用“编译”的时候，递归循环directives进程就跟在编译语言中编译源文件进程的工作流程一模一样。

匹配directives在我们编写directive之前，你得清楚当开发者给一个元素添加了一个directive的时候，AngularJS的HTML compiler编译器到底在弄啥？下面的这个例子我们就可以说<input> 匹配了 ngModel directive.

<input ng-model="foo">

下面这个例子，就是<person>元素匹配了persondirective

<person>{{name}}</person>

正常化AngularJS正常化一个元素的标签和其属性名去匹配一个元素到directive上，我们通常使用驼峰写法,如：ngModel，但是在HTML标签内部则是使用撸串写法。比如ng-model.

正常化的工作流程如下：

1. 在元素标签中用x-以及data-之类的书写元素/属性。
2. 将:,-;_转换成驼峰写法。

<div ng-controller="Controller">
  Hello <input ng-model='name'> <hr/>
  <span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
  <span ng_bind="name"></span> <br/>
  <span data-ng-bind="name"></span> <br/>
  <span x-ng-bind="name"></span> <br/>
</div>

directive的类型

$compile 可以基于元素名称（E）,S

s