Question

我已经按照UI-Router wiki上的示例和示例进行了操作： https://scotch.io/tutorials/angular-routing-using-ui-router 但是当它被注入控制器时，解析后的工厂是未定义的。任何帮助将不胜感激。

应用 var app = angular.module（＆＃39; toa＆＃39;，[＆＃39; ngResource＆＃39;，＆＃39; ui.bootstrap＆＃39;，＆＃39; ui.router＆＃39;]）;

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必须是函数dict而不是字符串。

将registerService: 'registerService'更改为以下内容：

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

Answer 2

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

如果你想在路由配置中使用resolve block注入一些东西，那么你需要提供一个函数来返回像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

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

如果您想在进入控制器之前注册用户或checkEmail，那么Resolve会很有趣。

我建议您删除解决部分，然后确保包含＆＃39; registerService＆＃39;函数声明之前的字符串。

angularjs ui-router解析工厂未定义

3 个答案: