How to send and retrieve parameters using state go toParams and stateParams

Question

I am using AngularJS v1 2 0-rc 2 with ui-router v0 2 0  I want to pass the referrer state to another state so I use the toParams of  state go like so    state go  toState    referer   state current name      According to the docs  this should populate the  stateParams on the toState controller  but it is undefined  What am I missing   I ve created a plunk to demonstrate    http   plnkr co edit ywEcG1

User · Answer

I was trying to Navigate from Page 1 to 2, and I had to pass some data as well.

In my router.js, I added params name and age :

.state('page2', {
          url: '/vehicle/:source',
          params: {name: null, age: null},
.................

In Page1, onClick of next button :

$state.go("page2", {name: 'Ron', age: '20'});

In Page2, I could access those params :

$stateParams.name
$stateParams.age

User · Answer

And in my case of a parent child state  all the parameters declared in child state has to be known by the parent state           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

User · Answer

Your define following in router js   stateProvider state  users         url    users       controller   UsersCtrl       params            obj  null            Your controller need add  stateParams   function UserCtrl  stateParams        console log  stateParams       You can send an object by parameter as follows    state go  users    obj yourObj

User · Answer

If this is a query parameter that you want to pass like this    toState referer current user   then you need to describe your state like this    stateProvider state  toState       url  toState referer     views               source  https   github com angular-ui ui-router wiki URL-Routing query-parameters

User · Answer

All I had to do was add a parameter to the url state definition like so  url    toState referer    Doh

User · Answer

I d faced a similar problem  I ended up with a working solution after a lot of googling and trial and test  Here is my solution which would work for you   I have two controllers - searchBoxController and stateResultController and a parameter named searchQuery to be passed from a view having a search box to a view showing the results fetched from a remote server  This is how you do it   Below is the controller from which you call the next view using  state go     controller  searchBoxController   function   scope   state             scope doSearch   function                var searchInputRaw    scope searchQueryInput               state go  app searchResults     searchQuery  searchInput                        Below is the state that would be called when the  state go   gets executed    state  app searchResults                                  url    searchResults                   views                                         menuContent     templateUrl   templates searchResult html   controller   stateResultController                                       params                                          searchQuery                                         And finally  the controller associated with the app searchResults state    controller  stateResultController   function   scope   state   stateParams   http             scope searchQueryInput    stateParams searchQuery

User · Answer

None of these examples on this page worked for me  This is what I used and it worked well  Some solutions said you cannot combine url with  state go   but this is not true  The awkward thing is you must define the params for the url and also list the params  Both must be present  Tested on Angular 1 4 8 and UI Router 0 2 15   In the state add your params to end of state and define the params   url   view index amp anotherKey   params    index   null   anotherKey   null    In your controller your go statement will look like this    state go  view      index   123   anotherKey    This is a test        Then to pull the params out and use them in your new state s controller  don t forget to pass in  stateParams to your controller function    var index    stateParams index  var anotherKey    stateParams anotherKey  console log anotherKey     it works

User · Answer

I ve spent a good deal of time fighting with Ionic   Angular s  state  amp   stateParams   To utilize  state go   and  stateParams you must have certain things setup and other parameters must not be present   In my app config   I ve included  stateProvider and defined within it several states    stateProvider      state  home             templateUrl   home           controller    homeController              state  view             templateUrl   overview           params         index    anotherKey            controller    overviewController           The params key is especially important   As well  notice there are NO url keys present    utilizing stateParams and URLs do NOT mix   They are mutually exclusive to each other   In the  state go   call  define it as such    state go  view      index   123   anotherKey    This is a test       The index and anotherKey  stateParams variables will ONLY be populated if they are first listed in the  stateController params defining key   Within the controller  include  stateParams as illustrated   app controller  overviewController   function  scope   stateParams        var index    stateParams index      var anotherKey    stateParams anotherKey        The passed variables should be available

User · Answer

If you want to pass non-URL state  then you must not use url when setting up your state  I found the answer on a PR and did some monkeying around to better understand    stateProvider state  toState       templateUrl  wokka html     controller  stateController     params         referer    some default         param2    some default         etc    some default            Then you can navigate to it like so    state go  toState      referer   jimbob    param2  37   etc   bluebell        Or   var result     referer  jimbob   param2 37  etc  bluebell      state go  toState   result     And in HTML thusly    lt a ui-sref  toState thingy   class  list-group-item  ng-repeat  thingy in thingies  gt    thingy referer    lt  a gt    This use case is completely uncovered in the documentation  but I think it s a powerful means on transitioning state without using URLs

User · Answer

The Nathan Matthews s solution did not work for me but it is totally correct but there is little point to reaching a workaround   The key point is  Type of defined parameters and toParamas of  state go should be same array or object on both sides of state transition    For example when you define a params in a state as follows you means params is array because of using         stateProvider  state  home         templateUrl   home       controller    homeController      state  view         templateUrl   overview       params         index    anotherKey        controller    overviewController       So also you should pass toParams as array like this   params      index   123   anotherKey    This is a test    paramsArr    val for key  val of params   state go  view   paramsArr    And you can access them via  stateParams as array like this   app controller  overviewController   function  scope   stateParams        var index    stateParams 0       var anotherKey    stateParams 1         Better solution is using object instead of array in both sides    stateProvider  state  home         templateUrl   home       controller    homeController      state  view         templateUrl   overview       params         index   null   anotherKey   null       controller    overviewController       I replaced    with    in params definition  For passing toParams to  state go also you should using object instead of array    state go  view      index   123   anotherKey    This is a test       then you can access them via  stateParams easily   app controller  overviewController   function  scope   stateParams        var index    stateParams index      var anotherKey    stateParams anotherKey

User · Answer

Not sure if it will work with AngularJS v1 2 0-rc 2 with ui-router v0 2 0  I have tested this solution on AngularJS v1 3 14 with ui-router v0 2 13   I just realize that is not necessary to pass the parameter in the URL as gwhn recommends   Just add your parameters with a default value on your state definition  Your state can still have an Url value    stateProvider state  state1         url     url       templateUrl    new html       controller    TestController       params   new param  null        and add the param to  state go     state go  state1   new param   Going places

User · Answer

Try With reload  true   Couldn t figure out what was going on for the longest time -- turns out I was fooling myself  If you re certain that things are written correctly and you will to use the same state  try reload  true    state  status item         url     id       views            state go  status item     id   scope id      reload  true       Hope this saves you time

User · Answer

The solution we came to having a state that took 2 parameters was changing    state  somestate       url    somestate     views            to   state  somestate       url    somestate id   amp sub       views

User · Answer

In my case I tried with all the options given here  but no one was working properly  angular 1 3 13  ionic 1 0 0  angular-ui-router 0 2 13   The solution was    state  tab friends           url    friends  param1  param2         views             tab-friends               templateUrl   templates tab-friends html             controller   FriendsCtrl                             and in the state go    state go  tab friends    param1   val1  param2   val2      Cheers

[angularjs] How to send and retrieve parameters using $state.go toParams and $stateParams?

Examples related to angularjs

Examples related to angular-ui-router