# 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
- 開發遇到的問題