高能警告:这是一篇面向有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>
元素匹配了person
directive
<person>{{name}}</person>
正常化AngularJS正常化一个元素的标签和其属性名去匹配一个元素到directive上,我们通常使用驼峰写法,如:ngModel,但是在HTML标签内部则是使用撸串写法。比如ng-model.
正常化的工作流程如下:
- 在元素标签中用
x-
以及data-
之类的书写元素/属性。 - 将
:
,-
;_
转换成驼峰写法。
<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