angularjs UI路由器解析工厂未定义

Question

我已经遵循了UI-Router Wiki上的示例以及此处的示例： https : //scotch.io/tutorials/angular-routing-using-ui-router，但是将解析的工厂注入到控制器中后，它是未定义的。 任何帮助将不胜感激。

app 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'
            }
        }
    });
});

调节器

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

resolve必须由函数而不是字符串决定。

将registerService: 'registerService'更改为如下所示：

registerService: function (){
      //here goes your resolve function.
}

Answer 2

首先，您忘了在$http之后$http控制器定义的数组表示法声明registerService 。

如果要在路由配置中使用resolve块注入某些内容，则需要提供一个返回内容的函数，例如Promise或仅一个值。 在您的情况下，请尝试以下操作：

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

但是请注意，在这种情况下，您可以直接将服务直接注入控制器，因为您无需在此处解决它：

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
}

Answer 3

解决您已经可以注入的服务没有任何意义。 我认为在模块级别声明的服务名称与已解决依赖项的名称之间存在冲突，因此角度丢失了。

如果您想在进入控制器之前先注册User或checkEmail，那么解决将很有趣。

我建议您删除解析部分，然后确保在函数声明之前包含“ registerService”字符串。