javascript - 直接将服务注入(inject) AngularJS 指令 Controller

Question

我了解 Angular 依赖注入(inject)如何与指令一起工作，但想澄清一些事情。我有一个虚拟测试指令如下:

app.directive("test", [

  function() {

    return {
      restrict: "E",
      scope: {},
      controller: ["$scope", "$filter",
        function($scope, $filter) {
          var food = ["Apple pie", "Apple cobler", "Banana Split", "Cherry Pie", "Applesauce"];

          $scope.favorites = $filter('filter')(food, "Apple");
        }
      ],
      template: "<div>{{favorites}}</div>"
    }
  }
]);

这很好用，并且会按预期过滤 food 数组。但是我注意到，如果我按如下方式在指令中注入(inject) $filter 服务，它仍然有效:

app.directive("test", ["$filter",

  function($filter) {

    return {
      restrict: "E",
      scope: {},
      controller: ["$scope",function($scope) {...

我的问题:将服务注入(inject)声明行中的指令是否更好:

app.directive("测试", ["$filter", function($filter) {

或者像这样在 Controller 行中:

Controller :["$scope", "$filter", function($scope, $filter) {?

没有区别吗？这是一个Plunker指令代码。

Answer 1

在这种情况下，您接收的是相同的服务，因此这可能无关紧要。我个人更喜欢让它们尽可能本地化；如果您不需要 link 函数中的 $filter 或类似的东西，我会把它注入(inject) Controller 。

在某些情况下，这还可以更容易地在测试期间模拟依赖项。