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

Question

Pardon if this question is a total blow-off... Just getting warmed-up into the world angularJS.

I have these two controllers: seekerController and wizardController ...

Inside the wizardController , I have a chat Scope object, and I have implemented a bunch of functions that are manipulating this chat Scope object.

Going back to the other controller now, ( seekerController ), I discover that I need to have basically a direct replica of this chat Scope object and all the other functions manipulating it as I have inside wizardController

The obvious way is just to copy all these into my other controller, and my work is done under a minute, but then I'll have a lot of repeated stuffs everywhere...

So: I'm looking for a way where I can have this(the code) in a single place, but still be able to have access to this chat Scope object from both controllers, as well as all the other functions working seamlessly.

Update - add code samples:

//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 = '';
        }

     ...

I now have an exact replica of the above code in a second controller WizardController . Exactly same, with no changes... and even a third controller have some of these, though not all.

Answer 1

The next level of abstraction to angularjs controllers are

• Factory
• Service
• Provider

You could use a service called maybe chatService which could contain the common code. You can inject the service into any controller which needs the common functionality and invoke the methods on the Service .

Do note that you could use any of the above three options even though I have mentioned just Service in the above statement.

EDIT 1:

You could move the common parts of the code from Controller to Service. For example:- You could move the construction of msg object from controller to chatService . You controller would be simply -

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

And your chatService would be doing the hard-work.

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

      sendMsg(opponentId, msg);
    }

After simplifying the Controller s you could revisit to see if you could use only one controller instead of 3 as they seem to be doing similar function.