Question

我正在重构我的一些Angular JS应用程序，并且我将更多地了解指令。

如果我们想要共享逻辑并获得代码清理，我已多次阅读将控制器绑定到指令是一种很好的做法。

将controller绑定到directive以共享许多指令之间的常见任务非常简单，我理解这种模式的兴趣。但我的问题是为什么我们需要使用控制器？

（示例代码来自this site）

模式1：使用控制器在指令之间共享逻辑

将controller绑定到directive：

app.directive("superhero", function () {
  return {
    restrict: "E",

    controller: function ($scope) {
      $scope.abilities = [];

      // [...] additional methods

      this.addFlight = function() {
        $scope.abilities.push("flight");
      };
    },

    link: function (scope, element) {
      element.addClass("button");
      element.bind("mouseenter", function () {
        console.log(scope.abilities);
      });
    }
  };
});

与其他指令共享逻辑：

app.directive("flight", function() {
  return {
    require: "superhero",
    link: function (scope, element, attrs, superheroCtrl) {
      superheroCtrl.addFlight();
    }
  };
});

当我想在我的控制器之间共享逻辑时，我创建了一个注入我的控制器的Factory。那么为什么不使用相同的模式？

模式2：使用工厂在指令之间共享逻辑

声明新的factory：

app.factory("myAwesomeFactory", function () {
    return {
        addFlight: function () { /* ... */ }
    };
});

将factory用于directive：

app.directive("flight", function(myAwesomeFactory) {
    return {
        require: "superhero",
        link: function (scope, element, attrs) {
            myAwesomeFactory.addFlight();
        }
    };
});

我无法理解为什么第一种方法比第二种方法更好。

加分问题：为什么我们在绑定到指令的控制器中使用this关键字？

非常感谢。我发现了很多关于如何将控制器绑定到指令的教程。但没有人解释为什么我们需要这样做。

Answer 1

我遇到的最大原因是，由于服务是单例，因此可以通过让多个指令依赖来自同一服务的逻辑来解决严重问题。这就是为什么与视图有关的任何事情都是通过控制器完成的。虽然您有时可以在指令中使用该服务，但如果可能的话，最好完全避免这种做法。

为什么使用控制器进行指令通信而不是服务

1 个答案: