angular.module('app', [])
.directive('myDirective', function() {
return {
restrict: String,
priority: Number,
terminal: Boolean,
template: String or Template Function:
function(tElement, tAttrs) {...},
templateUrl: String,
replace: Boolean or String,
scope: Boolean or Object,
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... },
compile: // 返回一个对象或连接函数,如下所示:
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
return function postLink(...) { ... }
}
};
});
下面我们来从上到下解释一下。
本系列所有的 实例基于 angular-seed
restrict
String
,
E(元素)<my-directive></my-directive>
A(属性,默认值)<div my-directive="expression"></div>
C(类名)<div class="my-directive:expression;"></div>
M(注释)<--directive:my-directive expression-->
priority:
Number
,指令执行优先级template:
String
,指令链接DOM模板,例如<h1>{{head}}</h1>
templateUrl:
String
,DOM模板路径replace:
Boolean
,指令链接模板是否替换原有元素