在angularjs ui-router状态下解析多个对象？

Here is my code:

这是我的代码：

.state("dashboard.userRoles", {
    url: "/user/:id/roles",
    controller: "userRolesController as vm",
    templateUrl: "app/auth/users/user-roles.html",
    resolve: {
        user: function (userResource, $stateParams) {
            return userResource.get({ id: $stateParams.id }).then(function (res) { return res.data; });
        },
        roles: function($http, $stateParams) {
            var url = appSettings.authApiBaseUrl + "api/accounts/users/" + $stateParams.id + "/roles";
            return $http.get(url).then(function(res) { return res.data; });
        },
        loadMyFiles: function($ocLazyLoad) {
            return $ocLazyLoad.load({
                name: "app",
                files: [
                    "app/auth/users/userRolesController.js"
                ]
            });
        }
    }
})

If I navigate to dashboard.userRole and look in fiddler, I see the request to get the user resource, but not the roles. If I comment out the user: section, I see the request to get the roles in fiddler. Why can't I resolve both? Should I just be sending the id into the controller and get everything there?

如果我导航到dashboard.userRole并查看fiddler，我会看到获取用户资源的请求，但不是角色。如果我注释掉用户：部分，我会看到在fiddler中获取角色的请求。为什么我不能解决这两个问题？我应该将id发送到控制器并获取所有内容吗？

I was trying to avoid gathering data in the controller as it should just be the stitching between the view model stuff and the ui. Maybe that doesn't matter? Thanks in advance.

我试图避免在控制器中收集数据，因为它应该只是视图模型的东西和ui之间的缝合。也许那没关系？提前致谢。

---

Edit 1: Ok, I can change the code to this and see both requests showing in fiddler, and they both return the properly formatted json data:

编辑1：好的，我可以将代码更改为此并查看fiddler中显示的两个请求，并且它们都返回格式正确的json数据：

.state("dashboard.userRoles", {
    url: "/user/:id/roles",
    controller: "userRolesController as vm",
    templateUrl: "app/auth/users/user-roles.html",
    resolve: {
        user: function (userResource, $stateParams) {
            return userResource.get({ id: $stateParams.id }).$promise;
        },
        roles: function($http, $stateParams) {
            var url = appSettings.authApiBaseUrl + "api/accounts/users/" + $stateParams.id + "/roles";
            return $http.get(url).then(function(res) { return res.data; }).$promise;
        },
        loadMyFiles: function($ocLazyLoad) {
            return $ocLazyLoad.load({
                name: "app",
                files: [
                    "app/auth/users/userRolesController.js"
                ]
            });
        }
    }
})

However, the roles injected into the controller are always 'undefined'. The user is populated correctly. And the response in fiddler shows the roles that come back, so I'm not sure why they are undefined. Here is the controller code.

但是，注入控制器的角色始终是“未定义的”。用户已正确填充。 fiddler中的响应显示了回来的角色，所以我不确定为什么它们是未定义的。这是控制器代码。

"use strict";

angular
    .module("app")
    .controller("userRolesController", [
        "user", "roles", function (user, roles) {

            console.log("app.userRolesController.function()");

            var vm = this;
            vm.user = user;
            vm.roles = roles;
        }
    ]);

3 个解决方案

#1

This angular-ui-router issue/question was helpful. Anyhow, this works!

这个angular-ui-router问题/问题很有帮助。无论如何，这有效！

.state("dashboard.userRoles", {
    url: "/user/:id/roles",
    controller: "userRolesController as vm",
    templateUrl: "app/auth/users/user-roles.html",
    resolve: {
        user: function (userResource, $stateParams) {
            return userResource.get({ id: $stateParams.id });
        },
        roles: function($http, $stateParams) {
            var url = appSettings.authApiBaseUrl + "api/accounts/users/" + $stateParams.id + "/roles";
            return $http.get(url);
        },
        loadMyFiles: function($ocLazyLoad) {
            return $ocLazyLoad.load({
                name: "app",
                files: [
                    "app/auth/users/userRolesController.js"
                ]
            });
        }
    }
})

And here is the controller. The .data on roles is important!

这是控制器。关于角色的.data很重要！

angular
    .module("app")
    .controller("userRolesController", [
        "user", "roles", function (user, roles) {

            var vm = this;
            vm.user = user;
            vm.roles = roles.data;
        }
    ]);

#2

Set a breakpoint (or watch) in the Chrome browser (within your angular controller). And inspect $state. I found my answer to be:

在Chrome浏览器中设置断点（或监视）（在角度控制器内）。并检查$ state。我发现我的答案是：

  $state.$current.locals.globals.employeeslist

#3

Thats pretty weird. Perhaps you could try:

这很奇怪。也许你可以试试：

.state("dashboard.userRoles", {
    url: "/user/:id/roles",
    controller: "userRolesController as vm",
    templateUrl: "app/auth/users/user-roles.html",
    resolve: {
        // put both in one object
        data: function (userResource, $stateParams, $http) {
            var url = appSettings.authApiBaseUrl + "api/accounts/users/" + $stateParams.id + "/roles";
            return {
                user: userResource.get({ id: $stateParams.id }).then(function (res) { return res.data; });
                roles: $http.get(url).then(function(res) { return res.data; });
            }
        },
        loadMyFiles: function($ocLazyLoad) {
            return $ocLazyLoad.load({
                name: "app",
                files: [
                    "app/auth/users/userRolesController.js"
                ]
            });
        }
    }
})

Update:

更新：

Solution above doesn't fix the problem. OP has resolved his own issue (See the comments below).

上面的解决方案无法解决问题。 OP解决了他自己的问题（见下面的评论）。