javascript - 如何在 angularJS 中干燥跨 Controller 的 $scope 操作代码

Question

如果这个问题完全是个吹毛求疵的话，请原谅……只是热身进入 angularJS 的世界。

我有这两个 Controller :seekerController 和 wizardController...

在 wizardController 内部，我有一个 chat 作用域对象，并且我已经实现了一系列操作该 chat 作用域对象的函数.

现在回到另一个 Controller (seekerController)，我发现我基本上需要有这个chat范围对象和所有其他功能的直接副本像我在 wizardController

中一样操作它

显而易见的方法是将所有这些复制到我的另一个 Controller 中，我的工作在一分钟内完成，但随后我会到处都有很多重复的东西......

所以:我正在寻找一种方法，可以将这个(代码)放在一个地方，但仍然能够从两个 Controller 访问这个 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 = '';
        }

     ...

我现在在第二个 Controller WizardController 中拥有上述代码的精确副本。完全相同，没有任何变化...甚至第三个 Controller 也有其中一些，尽管不是全部。

Answer 1

AngularJS Controller 的下一个抽象级别是

• 工厂
• 服务
• 提供商

您可以使用名为 chatService 的服务，其中可能包含通用代码。您可以将服务注入(inject)到任何需要通用功能的 Controller 中，并调用 Service 上的方法。

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

编辑1:

您可以将代码的公共(public)部分从 Controller 移至服务。例如:- 您可以将 msg 对象的构造从 Controller 移至 chatService。你的 Controller 很简单 -

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

简化 Controller 后，您可以重新审视是否可以仅使用一个 Controller 而不是 3 个，因为它们似乎具有类似的功能。