2014-07-04 17 views
15

Ho appena iniziato ad imparare angularjs e sto usando angolare-ui-router. Sto cercando di inviare dati da uno stato all'altro usando $state.go ma non ho avuto successo. Ecco cosa ho fino ad ora:UI-Router angolare che passa i dati tra stati con funzione go non funziona

Non ho incluso intenzionalmente l'html perché ho pensato che non fosse necessario se fosse necessario per favore dimmelo e lo aggiungerò.

Ho configurato i miei stati, come di seguito:

$stateProvider 
     .state('public', { 
      abstract: true, 
      templateUrl: 'App/scripts/main/views/PublicContentParent.html' 
     }) 
     .state('public.login', { 
      url: '/login', 
      templateUrl: 'App/scripts/login/views/login.html', 
      controller: 'loginCtrl' 
     }) 

    $stateProvider 
     .state('private', { 
      abstract: true, 
      templateUrl: 'App/scripts/main/views/PrivateContentParent.html' 
     }) 
     .state('private.visits', { 
      url: '/visits', 
      views: { 
       'main': { 
        controller: 'visitsListCtrl', 
        templateUrl: 'App/scripts/visits/views/VisitsList.html' 
       } 
      } 
     }); 

Quando il mio LoginController viene richiamato eseguirà il codice qui sotto:

loginModule.controller('loginCtrl', ['$state', function ($scope, $state) { 

    $state.go('private.visits', { name : "Object"}); 

}]); 

Quando la pagina private.visits è attivo, sto cercando di stampare il $stateParams:

visitsModule.controller('visitsListCtrl', ['$stateParams', 
    function ($stateParams) { 

     console.log($stateParams); 


    }]); 

Come stato $ stateParams è un oggetto vuoto. Mi aspettavo che contenga l'oggetto che ho passato in loginCtrl.

EDIT

sembra che se private.visits url ha questo formato URL '/visits/:name' e ho anche aggiungere i params di proprietà: [ "nome"] Ho ottenere l'accesso all'oggetto mando dallo stato public.login. L'effetto collaterale è che i parametri vengono aggiunti all'URL che è logico.

Ho provato a fare la stessa cosa con uno stato figlio senza url, e in questo caso sembra che non abbia accesso ai parametri passati da public.login.

Come si inviano i dati negli stati figlio?

risposta

27

Quello che devi fare è quello di definire la name param nel private.visits Stato come:

$stateProvider 
    .state('public', { 
     abstract: true, 
     templateUrl: 'App/scripts/main/views/PublicContentParent.html' 
    }) 
    .state('public.login', { 
     url: '/login', 
     templateUrl: 'App/scripts/login/views/login.html', 
     controller: 'loginCtrl' 
    }) 

$stateProvider 
    .state('private', { 
     abstract: true, 
     templateUrl: 'App/scripts/main/views/PrivateContentParent.html' 
    }) 
    .state('private.visits', { 

     // NOTE! 
     // Previously, we were only passing params as an array 
     // now we are sending it as an object. If you 
     // send this as an array it will throw an error 
     // stating id.match is not a function, so we updated 
     // this code. For further explanation please visit this 
     // url http://stackoverflow.com/a/26204095/1132354 
     params: {'name': null}, 

     url: '/visits', 
     views: { 
      'main': { 
       controller: 'visitsListCtrl', 
       templateUrl: 'App/scripts/visits/views/VisitsList.html', 
       resolve: { 
         name: ['$stateParams', function($stateParams) { 
          return $stateParams.name; 
         }] 
        } 
      } 
     } 
    }); 

E poi in Access Controller al nome:

visitsModule.controller('visitsListCtrl', ['name', 
function (name) { 
    console.log(name); 
}]); 

Spero che ti aiuta!

+0

Questa è una buona risposta con un chiaro esempio, dovrebbe essere accettata. – psp

+0

Possiamo passare un oggetto invece di tipi di dati primitivi? –

+1

No, puoi usare JSON.stringify ma ti consiglio di usare una fabbrica per condividere i dati. –

3

Quando si dice: $state.go('private.visits', { name : "Object"});

Non sta passando i dati allo stato private.visits, ma piuttosto si sta impostando un parametro al private.visits Stato, che non ha nemmeno supporta parametri non è stata definita parametri per esso nella configurazione dello stato. Se si desidera condividere i dati tra stati, utilizzare un servizio o se i propri stati hanno una relazione genitore-figlio, allora lo stato figlio avrà accesso ai dati degli stati genitori. Visto come non vuoi che i dati vengano seminati nei tuoi URL, utilizzerei un servizio (getter/setter) per raggiungere questo obiettivo.

+0

Non pensi che i parametri siano dati? Mi lascia perplesso. – psp

+0

I parametri passati a uno stato tramite l'URL sono tipi primitivi e sono resi come stringhe, l'OP voleva passare un oggetto, @Leandro La risposta di Zubrezki è corretta ma c'è una differenza, usare i parametri con ui-router permette di passare in oggetti (questo può essere considerato come 'dati' più dei parametri del percorso). Ma sì, la risposta di Leonardo è migliore della mia. –

+0

Per qualche motivo, ui-router filtrerà quell'oggetto parametri e includerà solo quelli i cui nomi corrispondono ai parametri del percorso per lo stato. Quindi, poiché il nome non è un parametro di percorso, viene eliminato. – DavidA

Problemi correlati