javascript - 在对等 AngularJS Controller 中重构一些重复代码以管理 $intervals 的想法

Question

我有一个小型 SPA，显示多个选项卡。每个选项卡都显示与其关联的应用程序的操作状态信息。每个选项卡的 Controller 都会创建 $interval 对象，这些对象对服务器进行 AJAX 调用以获取状态信息。

作为一名好公民，我得出的结论是，当一个选项卡可见时，应禁用其他选项卡的 $intervals，以便它们不会进行 AJAX 调用。当选择另一个选项卡/ Controller 时，将启用该选项卡/ Controller 的 $interval。

在 HTML 中，我的每个“tab”元素都具有如下属性:

select="selected()" deselect="deselected()"

在与每个选项卡关联的 Controller 中，我定义了这些方法，它们分别创建和取消与该选项卡关联的 $interval。在其中一个选项卡中，我有一个选项卡 Controller ，但它有一个包含两个条目的 Accordion ，并且我使用“$broadcast”，以便 Accordion 条目可以管理自己的 $intervals。

我不喜欢的是，我有一些几乎在每个 Controller 中重复的小方法。每个 Controller 都有“selected”和“deselected”方法，所有管理自己的$interval的组件都有“startInterval”和“cancelInterval”方法。在大多数选项卡中，所有四个选项卡都位于选项卡的 Controller 中。对于使用“$broadcast”的一个选项卡，我在选项卡 Controller 中具有“selected”和“deselected”方法，在 Accordion Controller 中具有“startInterval”和“cancelInterval”方法。

我希望我可以在所有选项卡的父 Controller 中定义“选定”和“取消选定”，但通过在 html 中添加一些小的“注册”代码来使这些方法“调用”关联的选项卡 Controller 对于选项卡。

但是，在 Controller 中保存重复内容可能最终会在 HTML 中产生一些看起来很奇怪的代码。

有什么想法可以做得更好吗？

Answer 1

我所做的是添加一个配置我的 Controller 的帮助服务。像这样的事情:

angular.module('myModule').service("controllerHelper", function() {

  this.configController = function(controller) {
    controller.oneCommonMethod = function() {/*Some common code*/};
    controller.twoCommonMethod = function() {/*Some more common code*/};
  }

});

angular.module('myModule').controller("myController", function($scope, controllerHelper) {

  controllerHelper.configController(this);

});

您还可以在调用此帮助程序服务的 Controller 之间共享状态来完成您想要的任务。