Question

我正在逐渐放弃使用$rootScope处理我angular应用程序周围数据的原始计划，因为我发现这不是一个好主意！我正在尝试在我的两个controllers之间设置一个服务，这样我就可以将控制器A中的数据传递给控制器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)

我认为这是因为我实际上没有正确地注射我的服务？但我并不完全确定我到底出错了。有人有任何想法吗？

非常感谢提前

Answer 1

请将MainPageController修改为

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

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

将自定义服务注入Angular控制器

1 个答案: