Внедрение пользовательских сервисов в Угловые контроллеры

Question

Я отхожу от своего первоначального плана работы с $rootScope, чтобы передавать данные вокруг своего приложения angular, потому что я понимаю, что это не очень хорошая идея! Я пытаюсь настроить службу между моими двумя controllers, которая позволит мне передать данные из контроллера в контроллер B.

В настоящее время у меня следующий код в моем application.js файле:

'use strict'; 

var application = angular.module('myApp', []); 

//Service between 2 Controllers: 
application.factory('interfaceService', function ($rootScope) { 

    var interfaceService = {}; 
    interfaceService.redirect = ""; 
    interfaceService.iframe = ""; 
    interfaceService.lightbox = ""; 

    interfaceService.prepForBroadcast = function (redirect, iframe, lightbox) { 
     this.redirect = redirect; 
     this.iframe = iframe; 
     this.lightbox = lightbox; 
     this.broadcastItem(); 
    }; 

    interfaceService.broadcastItem = function() { 
     $rootScope.$broadcast('handleBroadcast'); 
    }; 
    return interfaceService; 
    }); 
}); 

Я тогда следующий набор для контроллера A:

application.controller('SidebarController', ['$scope', '$rootScope', '$http', '$state', 'interfaceService', function ($scope, $rootScope, $http, $state, $translate, interfaceService) { 
//Select Integration 
    var lightbox = false; 
    var iframe = false; 
    var redirect = false; 
    $scope.integrationType = function (integrationChoice) { 
     switch (integrationChoice) { 
     case "redirect": 
      redirect = true; 
      iframe = false; 
      lightbox = false; 
      interfaceService.prepForBroadcast(redirect, iframe, lightbox); 
      break; 
     case "iframe": 
      iframe = true; 
      redirect = false; 
      lightbox = false; 
      interfaceService.prepForBroadcast(redirect, iframe, lightbox); 
      break; 
     case "lightbox": 
      lightbox = true; 
      redirect = false; 
      iframe = false; 
      interfaceService.prepForBroadcast(redirect, iframe, lightbox); 
      break; 
     } 
    } 
    $scope.$on('handleBroadcast', function() { 
     $scope.lightbox = interfaceService.lightbox; 
     $scope.iframe = interfaceService.iframe; 
     $scope.redirect = interfaceService.redirect; 
     console.log('SidebarController recieving information!'); 
    }); 
}]); 

и контроллер B (где я хочу, чтобы отправить информацию):

application.controller('MainPageController', ['$scope', '$rootScope', '$http', '$state', '$window', 'interfaceService', function ($scope, $rootScope, $http, $state, $window, $translate, $location, interfaceService) { 
    $scope.$on('handleBroadcast', function() { 
     $scope.lightbox = interfaceService.lightbox; 
     $scope.iframe = interfaceService.iframe; 
     $scope.redirect = interfaceService.redirect; 
     console.log('MainController recieving information!'); 
    }); 

}]); 

При попытке запуска приложения, я получаю следующее сообщение об ошибке в моей консоли:

TypeError: Cannot read property 'prepForBroadcast' of undefined 
    at h.$scope.integrationType (app.js:400) 
    at fn (eval at <anonymous> (all.js:4), <anonymous>:4:368) 
    at e (all.js:2) 
    at i (all.js:5) 
    at h.$eval (all.js:3) 
    at h.$apply (all.js:3) 
    at h.scopePrototype.$apply (hint.js:1427) 
    at HTMLLabelElement.<anonymous> (all.js:5) 
    at Dt (all.js:1) 
    at HTMLLabelElement.n (all.js:1) 

Я полагаю, что это потому, что я на самом деле amn't инъекционного моей службы правильно? Но я не совсем уверен, где именно я ошибаюсь. Кто-нибудь может подумать?

Большое спасибо заранее

Answer 1

Исправьте MainPageController в

application.controller('MainPageController', ['$scope', '$rootScope', '$http', '$state', '$window', 'interfaceService', function ($scope, $rootScope, $http, $state, $window, $translate, $location, interfaceService) {}]) 

имеет неверное число аргументов. Порядок переданных аргументов массиву должен быть таким же, как список аргументов функции.