javascript - 将自定义服务注入(inject) Angular Controller

Question

我正在放弃使用 $rootScope 来围绕我的 angular 应用程序传递数据的最初计划，因为我意识到这不是一个好主意!我正在尝试在我的两个 Controller 之间设置一项服务，这将使我能够将数据从 Controller A 传递到 Controller 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;
   });
});

然后我为 Controller 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!');
    });
}]);

和 Controller 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)

我认为这是因为我实际上没有正确注入(inject)我的服务？但我不完全确定我到底哪里出错了。有人知道吗？

提前致谢

Answer 1

请将 MainPageController 修复为

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

参数数量不正确。传递给数组的参数顺序应与函数参数列表相同。