Come inviare e recuperare i parametri usando $ state.go toParams e $ stateParams?

Sto usando AngularJS v1.2.0-rc.2 con ui-router v0.2.0. Voglio passare lo stato del referrer ad un altro stato, quindi uso i toParams di $state.go modo:

 $state.go('toState', {referer: $state.current.name}); 

Secondo i documenti , questo dovrebbe compilare $stateParams sul controller toState , ma non è undefined . Cosa mi manca?

Ho creato un plunk per dimostrare:

Se si desidera passare lo stato non URL, non è necessario utilizzare url quando si imposta il proprio state . Ho trovato la risposta su un PR e ho fatto qualche monkeying in giro per capire meglio.

 $stateProvider.state('toState', { templateUrl:'wokka.html', controller:'stateController', params: { 'referer': 'some default', 'param2': 'some default', 'etc': 'some default' } }); 

Quindi puoi navigare in questo modo:

 $state.go('toState', { 'referer':'jimbob', 'param2':37, 'etc':'bluebell' }); 

O:

 var result = { referer:'jimbob', param2:37, etc:'bluebell' }; $state.go('toState', result); 

E in HTML in questo modo:

 {{ thingy.referer }} 

Questo caso d’uso è completamente scoperto nella documentazione, ma penso che sia un mezzo potente per lo stato di transizione senza utilizzare gli URL.

La soluzione di Nathan Matthews non ha funzionato per me, ma è completamente corretta, ma non ha molto senso raggiungere una soluzione alternativa:

Il punto chiave è: il tipo di parametri definiti e toParamas di $ state.go dovrebbe essere lo stesso array o object su entrambi i lati della transizione di stato.

Ad esempio quando definisci un parametro in uno stato come segue, significa che params è array a causa dell’uso di “[]”:

 $stateProvider .state('home', { templateUrl: 'home', controller: 'homeController' }) .state('view', { templateUrl: 'overview', params: ['index', 'anotherKey'], controller: 'overviewController' }) 

Quindi anche tu dovresti passare a Paramar come array come questo:

 params = { 'index': 123, 'anotherKey': 'This is a test' } paramsArr = (val for key, val of params) $state.go('view', paramsArr) 

E puoi accedervi tramite $ stateParams come array come questo:

 app.controller('overviewController', function($scope, $stateParams) { var index = $stateParams[0]; var anotherKey = $stateParams[1]; }); 

Una soluzione migliore utilizza l’object anziché l’array su entrambi i lati :

 $stateProvider .state('home', { templateUrl: 'home', controller: 'homeController' }) .state('view', { templateUrl: 'overview', params: {'index': null, 'anotherKey': null}, controller: 'overviewController' }) 

Ho sostituito [] con {} in definizione params. Per passare a Paramar a $ state.go dovresti anche usare l’object invece della matrice:

 $state.go('view', { 'index': 123, 'anotherKey': 'This is a test' }) 

quindi puoi accedervi facilmente tramite $ stateParams:

 app.controller('overviewController', function($scope, $stateParams) { var index = $stateParams.index; var anotherKey = $stateParams.anotherKey; }); 

Tutto quello che dovevo fare era aggiungere un parametro alla definizione dello stato dell’URL in questo modo

 url: '/toState?referer' 

Doh!

Non sono sicuro se funzionerà con AngularJS v1.2.0-rc.2 con ui-router v0.2.0. Ho provato questa soluzione su AngularJS v1.3.14 con ui-router v0.2.13.

Mi rendo conto che non è necessario passare il parametro nell’URL come consiglia gwhn.

Basta aggiungere i parametri con un valore predefinito sulla definizione dello stato. Il tuo stato può ancora avere un valore di URL.

 $stateProvider.state('state1', { url : '/url', templateUrl : "new.html", controller : 'TestController', params: {new_param: null} }); 

e aggiungi il parametro a $state.go()

 $state.go('state1',{new_param: "Going places!"}); 

Nessuno di questi esempi in questa pagina ha funzionato per me. Questo è quello che ho usato e ha funzionato bene. Alcune soluzioni dicono che non puoi combinare url con $ state.go () ma questo non è vero. La cosa imbarazzante è che devi definire i parametri per l’url e anche elencare i parametri. Entrambi devono essere presenti. Testato su Angular 1.4.8 e UI Router 0.2.15.

Nello stato aggiungi i tuoi parametri alla fine dello stato e definisci i parametri:

 url: 'view?index&anotherKey', params: {'index': null, 'anotherKey': null} 

Nel tuo controller la tua istruzione go sarà simile a questa:

 $state.go('view', { 'index': 123, 'anotherKey': 'This is a test' }); 

Quindi estrarre i parametri e utilizzarli nel controller del nuovo stato (non dimenticare di passare $ stateParams alla funzione del controller):

 var index = $stateParams.index; var anotherKey = $stateParams.anotherKey; console.log(anotherKey); //it works! 

Ho passato molto tempo a combattere con lo stato $ di Ionic / Angular e $ stateParams;

Per utilizzare $ state.go () e $ stateParams devi avere alcune impostazioni e non devono essere presenti altri parametri.

Nella mia app.config () ho incluso $ stateProvider e definito al suo interno diversi stati:

 $stateProvider .state('home', { templateUrl: 'home', controller: 'homeController' }) .state('view', { templateUrl: 'overview', params: ['index', 'anotherKey'], controller: 'overviewController' }) 

La chiave params è particolarmente importante. Inoltre, notate che non ci sono tasti url presenti … utilizzando stateParams e URL NON si mescolano. Si escludono a vicenda l’un l’altro.

Nella chiamata $ state.go (), definiscila come tale:

 $state.go('view', { 'index': 123, 'anotherKey': 'This is a test' }) 

Le variabili index e anotherKey $ stateParams verranno popolate SOLO se vengono prima elencate nella chiave di definizione $ param di stateController.

All’interno del controller, includi $ stateParams come illustrato:

 app.controller('overviewController', function($scope, $stateParams) { var index = $stateParams.index; var anotherKey = $stateParams.anotherKey; }); 

Le variabili passate dovrebbero essere disponibili!

Nel mio caso ho provato con tutte le opzioni fornite qui, ma nessuno funzionava correttamente (angular 1.3.13, ionico 1.0.0, angular-ui-router 0.2.13). La soluzione era:

 .state('tab.friends', { url: '/friends/:param1/:param2', views: { 'tab-friends': { templateUrl: 'templates/tab-friends.html', controller: 'FriendsCtrl' } } }) 

e nello stato.go:

 $state.go('tab.friends', {param1 : val1, param2 : val2}); 

Saluti

Prova con reload: true ?

Non riuscivo a capire cosa stava succedendo da più tempo – scopre che mi stavo prendendo in giro. Se sei sicuro che le cose siano scritte correttamente e dovrai usare lo stesso stato, prova a reload: true :

 .state('status.item', { url: '/:id', views: {...} } $state.go('status.item', { id: $scope.id }, { reload: true }); 

Spero che questo ti salvi il tempo!

Avevo affrontato un problema simile. Alla fine ho trovato una soluzione funzionante dopo un sacco di google, test e prove. Ecco la mia soluzione che funzionerebbe per te.

Ho due controller: searchBoxController e stateResultController e un parametro denominato searchQuery da passare da una vista con una casella di ricerca a una vista che mostra i risultati recuperati da un server remoto. Ecco come lo fai:

Di seguito è riportato il controller da cui si chiama la vista successiva utilizzando $state.go()

 .controller('searchBoxController', function ($scope, $state) { $scope.doSearch = function(){ var searchInputRaw = $scope.searchQueryInput; $state.go('app.searchResults', { searchQuery: searchInput }); } }) 

Di seguito è riportato lo stato che verrà chiamato quando viene eseguito $state.go() :

 .state('app.searchResults', { url: '/searchResults', views: { 'menuContent': { templateUrl: 'templates/searchResult.html', controller: 'stateResultController' } }, params: { 'searchQuery': '' } }) 

E infine, il controller associato allo stato app.searchResults :

 .controller('stateResultController', function ($scope, $state, $stateParams, $http) { $scope.searchQueryInput = $stateParams.searchQuery; }); 

E nel mio caso di uno stato genitore / figlio. tutti i parametri dichiarati nello stato figlio devono essere conosciuti dallo stato genitore

  .state('full', { url: '/full', templateUrl: 'js/content/templates/FullReadView.html', params: { opmlFeed:null, source:null }, controller: 'FullReadCtrl' }) .state('full.readFeed', { url: '/readFeed', views: { 'full': { templateUrl: 'js/content/templates/ReadFeedView.html', params: { opmlFeed:null, source:null }, controller: 'ReadFeedCtrl' } } }) 

La soluzione alla quale siamo arrivati ​​ad avere uno stato che richiedeva 2 parametri stava cambiando:

 .state('somestate', { url: '/somestate', views: {...} } 

a

 .state('somestate', { url: '/somestate?id=:&sub=:', views: {...} } 

Se si tratta di un parametro di query che si desidera passare in questo modo: /toState?referer=current_user

allora devi descrivere il tuo stato in questo modo:

 $stateProvider.state('toState', { url:'toState?referer', views:{'...'} }); 

fonte: https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters

Il tuo definire seguente in router.js

 $stateProvider.state('users', { url: '/users', controller: 'UsersCtrl', params: { obj: null } }) 

Il controller deve aggiungere $ stateParams.

 function UserCtrl($stateParams) { console.log($stateParams); } 

È ansible inviare un object per parametro come segue.

 $state.go('users', {obj:yourObj});