Question

我的程序的某些指令需要在编译和链接函数中进行非常复杂的DOM操作和更多操作。如果我没有使用指令，我会将该代码拆分为函数并将它们放在compile fn之外。

目前我有：

directive('myDir',...):
compile: function (element, attrs) {
   var a1,a2;
   a1 = action1() {...};
   a2 = action2() {...};

   a1(); a2();
   return { link function }
}

相反，我宁愿：

directive('myDir',...):
compile: function (element, attrs) {
   a1(); a2(); // a1 and a2 declared somewhere else
   return { link function }
}

a1和a2可以在指令中的其他地方声明，以保持组件可重用，但同时具有可读代码。这些函数的定义目前在这个编译函数中（不在指令之间共享）。它只需要在那里，它可能会很长。

组织这个会有什么美妙的方式吗？

我想过将指令包装在一个函数中：

(function () {
   var a1 = function(params) {};
   myapp.directive(...compile and link functions, as usual);
})();

Answer 1

这样的东西？

myapp.directive('myDir', function() {
  var a1 = function(params) {
  };
  var a2 = function(params) {
  };
  return {
    link: ...,
    compile:...
  };
});

Answer 2

您可以创建一个处理这些函数行为的服务。

yourApp.directive('yourDirective', ['SomeService', ..., function(SomeService, ...) {
  return {
    compile: function(...) {
      SomeService.action1(...);
      SomeService.action2(...);
      ...
    },
    link: ...
  }
}]);

AngularJS：从compile（）和link（）重构辅助函数

2 个答案: