angularjs ui-路由器解析工厂未定义

Question

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

应用 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 之后声明 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

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

如果您想在进入控制器之前注册用户或检查电子邮件，Resolve 会很有趣。

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

angularjs ui-路由器解析工厂未定义

angularjs ui-router resolve factory undefined

javascript

angularjs

angular-ui-router