angularjs - 解决angularjs ui-router状态下的多个对象？

Question

这是我的代码:

.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"
                ]
            });
        }
    }
})

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

我试图避免在 Controller 中收集数据，因为它应该只是 View 模型内容和 ui 之间的拼接。也许这没关系？提前致谢。

编辑 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"
                ]
            });
        }
    }
})

但是，注入(inject) Controller 的 Angular 色始终是“未定义的”。用户已正确填充。 fiddler 中的响应显示了返回的 Angular 色，所以我不确定为什么它们是未定义的。这是 Controller 代码。

"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;
        }
    ]);

Answer 1

这个angular-ui-router issue/question很有帮助。无论如何，这行得通!

.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"
                ]
            });
        }
    }
})

这是 Controller 。 Angular 色的 .data 很重要!

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

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