Como enviar e recuperar parâmetros usando $ state.go toParams e $ stateParams?

Estou usando o AngularJS v1.2.0-rc.2 com o ui-roteador v0.2.0. Eu quero passar o estado referrer para outro estado, então eu uso o toParams de $state.go assim:

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

De acordo com os documentos , isso deve preencher os $stateParams no controlador toState , mas é undefined . o que estou perdendo?

Eu criei um plunk para demonstrar:

http://plnkr.co/edit/ywEcG1

Se você quiser passar o estado não-URL, então você não deve usar o url ao configurar seu state . Eu encontrei a resposta em um PR e fiz um pouco de monkeying ao redor para entender melhor.

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

Então você pode navegar para ele da seguinte forma:

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

Ou:

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

E em HTML assim:

 {{ thingy.referer }} 

Este caso de uso é completamente descoberto na documentação, mas eu acho que é um meio poderoso na transição do estado sem usar URLs.

A solução do Nathan Matthews não funcionou para mim, mas está totalmente correta, mas não há razão para chegar a uma solução alternativa:

O ponto chave é: Tipo de parâmetros definidos e toParamas de $ state.go devem ser a mesma matriz ou object em ambos os lados da transição de estado.

Por exemplo, quando você define um params em um estado da seguinte forma, você quer dizer que params é array porque usa “[]”:

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

Então também você deve passar para os parâmetros como array assim:

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

E você pode acessá-los via $ stateParams como array assim:

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

Melhor solução é usar object em vez de matriz em ambos os lados :

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

Eu substitui [] com {} na definição params. Para passar paraParams para $ state.go também você deve usar object em vez de matriz:

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

então você pode acessá-los via $ stateParams facilmente:

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

Tudo o que eu tinha que fazer era adicionar um parâmetro à definição do estado da url como

 url: '/toState?referer' 

Doh!

Não tenho certeza se ele funcionará com o AngularJS v1.2.0-rc.2 com o ui-router v0.2.0. Eu testei essa solução no AngularJS v1.3.14 com o ui-router v0.2.13.

Acabei de perceber que não é necessário passar o parâmetro no URL, como recomenda o gwhn.

Basta adicionar seus parâmetros com um valor padrão na sua definição de estado. Seu estado ainda pode ter um valor de URL.

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

e adicione o param a $state.go()

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

Nenhum desses exemplos nesta página funcionou para mim. Isso é o que eu usei e funcionou bem. Algumas soluções disseram que você não pode combinar url com $ state.go (), mas isso não é verdade. O mais estranho é que você deve definir os parâmetros para o url e também listar os parâmetros. Ambos devem estar presentes. Testado no Angular 1.4.8 e no Roteador UI 0.2.15.

No estado, adicione seus parâmetros ao fim do estado e defina os parâmetros:

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

Em seu controlador, sua instrução go ficará assim:

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

Então, para extrair os parâmetros e usá-los no controlador do novo estado (não se esqueça de passar $ stateParams para a function do controlador):

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

Passei bastante tempo lutando com $ state & $ stateParams do Ionic / Angular;

Para utilizar $ state.go () e $ stateParams você deve ter certas configurações e outros parâmetros não devem estar presentes.

No meu app.config () eu incluí $ stateProvider e defini dentro dele vários estados:

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

A chave params é especialmente importante. Além disso, observe que não há chaves de url presentes … utilizando stateParams e URLs não se misturam. Eles são mutuamente exclusivos um do outro.

Na chamada $ state.go (), defina-o como tal:

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

As variables index e anotherKey $ stateParams SOMENTE serão preenchidas se forem listadas pela primeira vez na chave de definição dos params $ stateController.

Dentro do controlador, inclua $ stateParams como ilustrado:

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

As variables ​​passadas devem estar disponíveis!

No meu caso eu tentei com todas as opções dadas aqui, mas ninguém estava funcionando corretamente (angular 1.3.13, iônico 1.0.0, angular-ui-roteador 0.2.13). A solução foi:

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

e no estado.go:

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

Felicidades

Tente com reload: true ?

Não conseguia descobrir o que estava acontecendo há mais tempo – acontece que eu estava me enganando. Se tiver certeza de que as coisas estão escritas corretamente e você vai usar o mesmo estado, tente reload: true :

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

Espero que isso economize seu tempo!

Eu enfrentei um problema semelhante. Acabei com uma solução de trabalho depois de muito googling e teste e teste. Aqui está a minha solução que funcionaria para você.

Eu tenho dois controladores – searchBoxController e stateResultController e um parâmetro chamado searchQuery para ser passado de uma exibição com uma checkbox de pesquisa para uma exibição mostrando os resultados buscados de um servidor remoto. É assim que se faz:

Abaixo está o controlador do qual você chama a próxima exibição usando $state.go()

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

Abaixo está o estado que seria chamado quando o $state.go() executado:

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

E finalmente, o controlador associado ao estado app.searchResults :

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

E no meu caso de um estado pai / filho. todos os parâmetros declarados no estado filho devem ser conhecidos pelo estado pai

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

A solução que chegamos a ter um estado que levou 2 parâmetros estava mudando:

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

para

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

Se este é um parâmetro de consulta que você deseja passar assim: /toState?referer=current_user

então você precisa descrever seu estado assim:

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

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

Seu define seguindo em router.js

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

Seu controlador precisa adicionar $ stateParams.

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

Você pode enviar um object por parâmetro da seguinte maneira.

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