javascript - angularjs ui-router解析工厂未定义

Question

我遵循了 UI-Router wiki 上的示例和此处的示例: https://scotch.io/tutorials/angular-routing-using-ui-router 但是解析的工厂在注入(inject) Controller 时是未定义的。任何帮助将不胜感激。

应用程序 var app = angular.module('toa', ['ngResource', 'ui.bootstrap', 'ui.router']);

app.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/');
    $stateProvider.state('home', {
        url: '/',
        views: {
            '' : {
              templateUrl: 'app/partials/home-partial.html'  
            },
            'sidebar@home': {
                templateUrl: 'loginMenu.html',
                controller: 'loginController'
            },
            'content@home': {
                templateUrl: 'app/views/home.html',
                controller: 'homeController'
            }
        }
    }).state('register', {
        url: '/register',
        views: {
            '': { templateUrl: 'app/partials/register-partial.html' },
            'content@register': {
                resolve: {
                    registerService: 'registerService'
                },
                templateUrl: 'app/views/registerView.html',
                controller: 'regController'
            }
        }
    });
});

Controller

app.controller('regController', ['$scope', '$location', '$resource', '$http', function($scope, $route, $routeParams, $location, $resource, $http, registerService){
   // Controller code is here console.log(registerService) prints undefined
}

服务

app.factory('registerService', ['$http', function($http){
    return {
        registerPlayer : function(playerName, playerPassword, playerEmail, playerGender) {
            var newPlayer = {
                ...
            };
            $http.post('...', newPlayer).
                success(function(data, status, headers, config) {
                    console.log(data);
                    console.log(status);
                }).
                error(function(data, status, headers, config) {
                    console.log(data);
                    console.log(status);
                });
        },
        checkEmail : function(emailIn) {
            var data = { email : emailIn };
            return $http.post('...', data).
                then(function(data) {
                    return data;
                });
        },
        checkUsername : function(usernameIn) {
            var data = { username : usernameIn };
            return $http.post('...', data).
                then(function(data) {
                    return data;
                });
        }
    };
}]);

Answer 1

首先，您忘记在 Controller 定义的数组表示法中的 $http 之后声明 registerService。

如果你想在路由配置中使用解析 block 注入(inject)一些东西，那么你需要提供一个返回一些东西的函数，比如 Promise，或者只是一个值。根据您的情况，请尝试以下操作:

resolve: {
    registerService: function(registerService) {
        return registerService;
    }
},

但是请注意，在您的情况下，您可以简单地将服务直接注入(inject) Controller ，因为您不需要在此处解决它:

app.controller('regController', ['$scope', '$location', '$resource', '$http', 'registerService', function($scope, $route, $routeParams, $location, $resource, $http, registerService) {
   // Controller code is here console.log(registerService) prints undefined
}