Angular directive: $compile

参考链接：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: '
', // 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) { ... }
});