如何在 angularJS 中跨控制器干燥 $scope 操作代码

Question

如果这个问题是一个彻底的吹嘘，请原谅......刚刚开始热身到世界 angularJS。

我有这两个控制器：seekerController 和 wizardController...

在wizardController 内部，我有一个chat Scope 对象，并且我已经实现了一系列操作这个chat Scope 对象的函数。

现在回到另一个控制器，（seekerController），我发现我需要基本上直接复制这个chat Scope 对象和所有其他操作它的函数，就像我在wizardController 里面一样。 /p>

显而易见的方法是将所有这些复制到我的另一个控制器中，我的工作不到一分钟就完成了，但是我到处都会有很多重复的东西......

所以：我正在寻找一种方法，我可以在一个地方拥有这个（代码），但仍然能够从两个控制器以及所有其他控制器访问这个 chat Scope 对象功能无缝衔接。

更新 - 添加代码示例：

//seekerController
angular.module('cg.seeker', [])
    .controller('SeekerController', ['$scope', 'seekerService', 'timeService', 'chatService', '$stateParams', 'toastr',
      function ($scope, seekerService, timeService, chatService, $stateParams, toastr) {
        ...
        // THE CHAT BUSINESS
        $scope.chat = { close: true };
        chatService.unreadCount(function(count){
          $scope.chat.unreadCount = count;
          $scope.$apply();
        });

        chatService.listDialogs( function (dialogList) {
          $scope.chat.dialogList = dialogList.items;
          $scope.$apply();
        } );

        $scope.endChat = function () {
          $scope.chat.close = true;
        }

        $scope.chatBox = function (dialogId, occupants_ids) {
          $scope.chat.opponentId = getOpponentId(occupants_ids);
          chatService.getMessages( dialogId, function (messageList) {
            $scope.chat.messages = messageList.items;
            $scope.chat.close = false;
            $scope.$apply();
          });
        }

        var getOpponentId = function (opponentId) {
          if(typeof(opponentId) != 'object') {
            return opponentId;
          } else {
            return opponentId.filter(function(x) { return x != $scope.seeker.chat_user.chat_id_string; })[0];
          }
        }

        $scope.sendMsg = function (opponentId) {
          var msg = {
            type: 'chat',
            body: $scope.chat.msg,
            extension: {
              save_to_history: 1,
            }
          };

          chatService.sendMsg(opponentId, msg);
          $scope.chat.msg = '';
        }

     ...

我现在在第二个控制器WizardController 中有上述代码的精确副本。完全一样，没有任何变化……甚至第三个控制器也有一些，但不是全部。

Answer 1

angularjs 控制器的下一级抽象是

• 工厂
• 服务
• 提供者

您可以使用一个名为 chatService 的服务，它可能包含公共代码。您可以将服务注入任何需要通用功能的控制器并调用Service 上的方法。

请注意，即使我在上面的声明中只提到了Service，您也可以使用上述三个选项中的任何一个。

编辑 1：

您可以将代码的公共部分从 Controller 移动到 Service。 例如：- 您可以将 msg 对象的构造从控制器移动到 chatService。你的控制器很简单 -

$scope.sendMsg = function (opponentId) {
      chatService.sendMsg(opponentId);
      $scope.chat.msg = '';
    }

而您的chatService 将会努力工作。

    $chatService.sendMsg = function (opponentId) {
      var msg = {
        type: 'chat',
        body: $scope.chat.msg,
        extension: {
          save_to_history: 1,
        }
      };

      sendMsg(opponentId, msg);
    }

在简化 Controllers 之后，您可以重新访问，看看您是否可以只使用一个控制器而不是 3 个，因为它们似乎在执行类似的功能。