11

从 angularjs 的文档中，定义指令时，有一个postLinkincompile和一个postLinkinlink

myModule.directive('directiveName', function factory(injectables) {
  var directiveDefinitionObject = {
    priority: 0,
    template: '<div></div>',
    templateUrl: 'directive.html',
    replace: false,
    transclude: false,
    restrict: 'A',
    scope: false,
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) { ... },
        post: function postLink(scope, iElement, iAttrs, controller) { ... }
      }
    },
    link: function postLink(scope, iElement, iAttrs) { ... }
  };
  return directiveDefinitionObject;
});

他们之间有什么区别？我注意到postLinkinlink的参数小于in 的参数compile。还有其他区别吗？

4

2 回答 2

30

它们没有什么不同，您所拥有的只是文档中的伪代码。postLink 函数只是最重要的一个，因此有多种声明方式。

这里以Plunker为例...

...这是一些伪代码，显示了 postLink 函数的不同声明：

app.directive('dir1', function () {
   return function(scope, elem, attr) {
       //this is the same
   };
});

app.directive('dir2', function () {
   return {
       link: function(scope, elem, attr) {
           //this is the same
       }
   };
});

app.directive('dir3', function () {
   return {
      compile: function compile(tElement, tAttrs, transclude) {
         return {
           post: function postLink(scope, elem, attrs) {
              //this is the same
           }
         }
      }
   };
});

...你只需要一个。

于 2013-01-28T15:20:34.130 回答
0

本质区别在于，在预链接功能中，子元素还没有被链接。但在post-link功能中，它有。

这对 DOM 操作有影响。由于链接的过程可能会进一步操作 DOM，因此只有当它的子节点已经被链接时，指令才可以安全地操作 DOM - 这仅在 post-link 函数中是正确的。

于 2014-06-21T17:10:10.493 回答