angularjs - 在跨多个指令共享的链接函数中添加 Angular 依赖项

Question

我有几个使用相同链接函数的指令。 (链接函数根据用例添加了一些额外的状态和 html。)所以我声明如下:

function common_linkfunc(){...}

var Directive_1 = function($scope, etc) {
   return {restrict:"E", ...
           link: common_linkfunc,
           controller: function($scope, etc) {...}
   };
}
Directive_1.$injects = ["$scope", "etc"];
angular.module("module").directive("D1", Directive_1)...;

第一个变化是链接函数需要$compile。接下来我需要添加 $templateCache，我的问题是如何系统地执行此操作？

我的第一个方法是将 common_linkfunc 重写为

function foo($compile, $templateCache) {
    return common_linkfunc($compile, $templateCache) {...}
}

然后在每个指令中使用它:

... 链接:foo($compile, $templateCache), ...

但这是复制粘贴!有没有更简单、更不容易出错的方法来做同样的事情？

Answer 1

无论采用哪种解决方案，您都需要向常用链接函数传递一些参数，因为 Angular 不会为您注入(inject)任何内容。话虽如此，我可以想到两种不同的方法:

1) 使用参数

app.directive('foo', function($http, $timeout) {
  return {
    restrict: 'E', 
    link: linkFn1.apply(null, arguments)
  }
});

function linkFn1($http, $timeout) {
  return function(scope, element, attrs) {
    // ...
  };
}

这里的缺点是指令函数中参数的顺序很重要。如果其他一些指令使用不同的顺序，代码将无法正常工作。

2) 使用$injector

app.directive('bar', function($injector) {
  return {
    restrict: 'E', 
    link: linkFn2($injector)
  }
});

function linkFn2($injector) {
  var $http = $injector.get('$http'),
      $timeout = $injector.get('$timeout');

  return function(scope, element, attrs) {
    // ...
  };
}

Working Plunker