2015-07-24 9 views
8

Ecco il mio codice:Risolvi più oggetti nello stato del router angularjs?

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

cosa è 'userResource'? è un oggetto '$ risorsa'? – charlietfl

+0

sì, è un oggetto risorsa $. – BBauer42

risposta

7

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

e se vuoi che la promessa venga restituita per '$ risorsa' ... 'restituisci userResource.get ({id: $ stateParams.id}).$ promise' – charlietfl

+0

Come posso usare in uno stato risolvere un servizio che viene caricato prima di chiamarlo e usarlo; in questo modo: diciamo che in 'utente' carico il mio file di servizio con ocLazyLoad e in' ruoli' voglio usare quel servizio caricato? Come aspettare lazyload? – sTx

-1

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).

+0

quando provo che solo la richiesta userResource.get mostra in fiddler. : o ( – BBauer42

+0

Hmm ... forse questo è un problema con il violinista ... il controller riceve comunque i dati? – jsonmurphy

+0

Vedere la mia modifica, ho aggiornato la risoluzione e vedere il violinista che mostra entrambe le richieste API, entrambe che rispondono con i dati corretti, tuttavia il controller mostra sempre i dati dei "ruoli" come indefiniti per qualche motivo: – BBauer42

1

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