重构对等angularjs控制器中的一些重复代码以管理$intervals的想法

Question

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

为了成为一个好公民，我的结论是，当一个选项卡可见时，应该禁用其他选项卡的$intervals，这样它们就不会调用AJAX。选择另一个选项卡/控制器时，将启用该选项卡/控制器的$interval。

在HTML中，我的每个"tab“元素都有如下属性：

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

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

我不喜欢的是，我有几个几乎在每个控制器中都重复的小方法。每个控制器都有一个“选定的”和“取消选定的”方法，所有管理它们自己的$interval的组件都有"startInterval“和"cancelInterval”方法。在大多数选项卡中，这四个选项卡都在选项卡的控制器中。对于使用"$broadcast“的选项卡，我在选项卡控制器中有"selected”和"deselected“方法，在accordion控制器中有"startInterval”和"cancelInterval“方法。

我希望我可以在所有标签的父控制器中定义“选定的”和“取消选定的”，但通过在标签的html中添加一些小的“注册”代码，使这些方法“调用”相关的标签控制器。

但是，在控制器中保存重复项可能会在HTML中以一些看起来很奇怪的代码结束。

有没有办法做得更好？

Answer 1

我所做的是添加一个帮助服务来配置我的控制器。如下所示：

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);

});

您还可以在调用此帮助器服务的控制器之间共享状态，以完成您想要的操作。

Answer 2

只是玩玩@Geoff Genz代码

angular.module('app', [])
                .service("controllerHelper", function() {
                    this.configController = function(scope) {
                            scope.test = 'My test';
                    }
                })
               .controller('MainCtrl',function($scope,controllerHelper){
                    controllerHelper.configController($scope);
               });

例如，如果你有一个crud需要一个datepicker配置，你可以利用这个代码

更新

Imo上面的代码违背了oop封装原则。

Answer 3

好吧，我没有直接使用这个建议，但我想我的解决方案有一些这样的感觉。

我将每个对象的HTML更改为以下内容：

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

然后，我使用这些元素定义了一个应用程序范围的控制器：

$scope.tabsOpened   = {};

$scope.deselected   =
    function(ctrl) {
        ctrl.tabClosed();
        delete $scope.tabsOpened[ctrl];
    };
$scope.selected     =
    function(ctrl) {
        ctrl.tabOpened();
        $scope.tabsOpened[ctrl] = ctrl;
    };

$scope.$on('$destroy', function() {
    for (var ctrl in tabsOpened) {
        if ($scope.tabsOpened.hasOwnProperty(ctrl))
            ctrl.tabClosed();
    }
});

在每个选项卡的控制器中，我在每个作用域中定义了"tabOpened“和"tabClosed”函数。这就让每个选项卡的控制器来做它的设置和清理。请注意，我还处理了顶部控制器中的$destroy事件，并告诉每个选项卡进行清理。