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

我试图避免在控制器中收集数据，因为它应该只是视图模型内容和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"
                ]
            });
        }
    }
})

但是，注入控制器的角色始终是“未定义的”。用户已正确填充。小提琴手的反应显示了回来的角色，所以我不确定他们为什么不明确。这是控制器代码。

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

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

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

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

Answer 2

在Chrome浏览器中设置断点（或观察点）（在角度控制器内）。并检查$state。我找到了答案：

  $state.$current.locals.globals.employeeslist

Answer 3

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

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

<强>更新

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

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

3 个答案: