Risolvi più oggetti nello stato del router angularjs?

Question

Ecco il mio codice:

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

Se ci si dirige verso dashboard.userRole e guardo violinista, vedo la richiesta per ottenere l'utente risorsa, ma non i ruoli. Se commento l'utente: sezione, vedo la richiesta di ottenere i ruoli in Fiddler. Perché non posso risolvere entrambi? Dovrei semplicemente mandare l'id nel controller e ottenere tutto lì?

Stavo cercando di evitare la raccolta di dati nel controller in quanto dovrebbe essere solo il punto tra il modello di visualizzazione e l'interfaccia utente. Forse non importa? Grazie in anticipo.

---

Edit 1: Ok, posso cambiare il codice per questo e vedere entrambe le richieste che mostra in violinista, ed entrambi restituire i dati JSON formattato correttamente:

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

Tuttavia, il i ruoli immessi nel controller sono sempre "indefiniti". L'utente è popolato correttamente. E la risposta nel violinista mostra i ruoli che tornano, quindi non sono sicuro del perché non sono definiti. Ecco il codice del 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

Questo angular-ui-router issue/question è stato utile. Comunque, funziona!

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

Ed ecco il controller. I dati sui ruoli sono importanti!

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

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

Answer 2

Questo è piuttosto strano. Forse si potrebbe provare:

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

Aggiornamento:

soluzione di cui sopra non risolve il problema. OP ha risolto il suo problema (vedi i commenti sotto).

Answer 3

Impostare un punto di interruzione (o un orologio) nel browser Chrome (all'interno del controller angolare). E ispezionare $state. Ho trovato la mia risposta: