# Comprehensive Directive API
> Directive Definition Object:
```javascript
var myModule = angular.module(...);
myModule.directive('directiveName', function factory(injectables) {
var directiveDefinitionObject = {
priority: 0,
template: '<div></div>', // or // function(tElement, tAttrs) { ... },
// or
// templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... },
transclude: false,
restrict: 'A',
templateNamespace: 'html',
scope: false,
controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
controllerAs: 'stringIdentifier',
bindToController: false,
require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'],
multiElement: false,
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) { ... },
post: function postLink(scope, iElement, iAttrs, controller) { ... }
}
// or
// return function postLink( ... ) { ... }
},
// or
// link: {
// pre: function preLink(scope, iElement, iAttrs, controller) { ... },
// post: function postLink(scope, iElement, iAttrs, controller) { ... }
// }
// or
// link: function postLink( ... ) { ... }
};
return directiveDefinitionObject;
});
```
## 属性详情
> `multiElement`
> `priority`
当一个DOM元素上定义了多个指令并被同时应用时,指令的执行顺序显得尤为重要。指令在被编译之前,会根据`priority`指定的数值进行排序。`priorty`接收一个数字作为值,并且值越大,代表其优先级超高,就会被优先执行。`pre-link`函数同样也按照`priory`指定的顺序执行,不同点在于它是按逆序执行。相同优先级的指令顺序是 undefined 。priority 的默认值是 0.
> `terminal`
> `scope`
> `bindToController`
> `controller`
> `require`
获取另外一个指令并且将其控件器作为第4个参数注入到当前指令的 `link` 函数中。`require` 属性接受一个字体串,数组或者对象作为参数。
- 一个**字符串**, 包含了传入 `link` 函数的指令的名称。
- 一个**数组**,包含了一组需要传递到 `link` 函数的指令的名称,参数的顺序必需和 `require` 中的名字保持一致。
- 一个**对象**,它的属性值为传入 `link` 函数的指令的名称。传入到 `link` 函数的参数同样也可以是一个匹配的对象,其属性值包含相应的控件器名称。
> `controllerAs`
> `restrict`
用于限制指令的声明类型,值为 `EACM` 中的某一个字符。如果忽略不传,使用默认(元素和属性)方式。
- `E` - 元素名(默认): `<my-directive></my-directive>`
- `A` - 属性名(默认): `<div my-directive="exp"></div>`
- `C` - 类名: `<div class="my-directive: exp;"></div>`
- `M` - 注释: `<!-- directive: my-directive exp -- >`
> `templateNamespace`
> `template`
> `templateUrl`
> `replace`
> `transclude`
> `compile`
> `link`
- 说明
- angular 1.x
- ngModelController
- ngOptions
- ngModelOptions
- lifecycle
- directive
- angular 2
- @angular/forms
- 类
- AbstractControl
- AbstractControlDirective
- AbstractFormGroupDirective
- FormControl
- FormArray
- FormBuilder
- FormGroup
- NgControl
- 接口
- controlValueAccessor
- 指令
- DefaultValueAccessor
- Angular 2 生命周期
- OnInit
- DoCheck
- @angular/router
- 配置
- Routes
- 指令
- RouterOutlet
- RouterLink
- 接口
- ActivatedRoute
- UrlTree
- NavigationExtras
- ActivatedRouteSnapshot
- RouterStateSnapshot
- 类
- UrlSegment
- UrlSegmentGroup
- UrlSerializer
- DefaultUrlSerializer
- Router
- bug记得
- @angular/http
- 类
- Http
- Body
- Response
- ResponseOptions
- Header
- Request
- RequestOptions
- URLSearchParams
- @angular/core
- decorator
- Component-decorator
- animation
- DI
- linker
- TemplateRef
- ElementRef
- EmbeddedViewRef
- ViewRef
- ViewContainerRef
- Query
- ComponentFactory
- ComponentRef
- Renderer
- change_detection
- KeyValueDiffers
- IterableDiffers
- ChangeDetectorRef
- ChangeDetectionStrategy
- Zone
- ngZone
- @angular/common
- 指令
- NgTemplateOutlet
- QueryList
- bootstrap4
- card
- form
- 重点关注博客
- 学习过的文章
- 笔记
- Angular 2 双向绑定
- 将字符串解析成DOM
- rx相关
- operators
- combineLatest
- combineAll
- concat(All, Map, *MapTo)
- 背压(backpressure)
- js事件keycode对应表
- 装饰器
- 有用的代码摘录
- 日期操作
- 数量操作
- 字符操作
- rxjs问题
- 小示例
- h5面试准备
- react
- 开发遇到的问题