参考链接:Angular $compile..
The difference resides in the return value of the factory function. You can either return a "Directive Definition Object" (see below) that defines the directive properties, or just the postLink function (all other properties will have the default values).
Best Practice: It's recommended to use the "directive definition object" form.
1, Here's an example directive declared with a Directive Definition Object:
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'],
compile: function compile(tElement, tAttrs, transclude) {
// 这里只会执行一次
return {
pre: function preLink(scope, iElement, iAttrs, controller) {
//Executed before the child elements are linked. Not safe to do DOM transformation since the compiler linking function will fail to locate the correct elements for linking.
//如果是repeat这个组件,则每一次循环调用都会执行这个函数
},
post: function postLink(scope, iElement, iAttrs, controller) {
//如果是repeat这个组件,则每一次循环调用都会执行这个函数。这个方法可以做一些定制化的样式。例如,当某个条件为真时,做一些格式化的操作:
/*
if (scope.someObject.someProperty == 'Y') {
iElement.removeAttr('class');
}
*/
//Executed after the child elements are linked.
//It is safe to do DOM transformation in the post-linking function on elements that are not waiting for their async templates to be resolved.
}
}
// or
// return function postLink( ... ) { ... }
},
// or
// link: {
// pre: function preLink(scope, iElement, iAttrs, controller) { ... },
// post: function postLink(scope, iElement, iAttrs, controller) { ... }
// }
// or
// link: function postLink( ... ) { // 这个其实就是compile里的postLink,相当于它的简化代码}
};
return directiveDefinitionObject;
});
Note: Any unspecified options will use the default value. You can see the default values below.
2, Therefore the above can be simplified as:
var myModule = angular.module(...);
myModule.directive('directiveName', function factory(injectables) {
var directiveDefinitionObject = {
link: function postLink(scope, iElement, iAttrs) { ... }
};
return directiveDefinitionObject;
// or
// return function postLink(scope, iElement, iAttrs) { ... }
});