How to pass parameters using ui-sref in ui-router to controller

Question

I need to pass and recieve two parameters to the state I want to transit to using ui-sref of ui-router   Something like using the link below for transitioning the state to home with foo and bar parameters    lt a ui-sref  home  foo   fooVal   bar   barVal     gt Go to home state with foo and bar parameters  lt  a gt    Receiving foo and bar values in a controller   app controller  SomeController   function  scope   stateParam             var foo    stateParam foo    getting fooVal   var bar    stateParam bar    getting barVal                   I get undefined for  stateParam in the controller   Could somebody help me understand how to get it done   Edit    state  home       url         views                    templateUrl   home html         controller   MainRootCtrl                A home           templateUrl   a html         controller   MainCtrl               B home           templateUrl   b html         controller   SomeController

User · Answer

You simply misspelled  stateParam  it should be  stateParams  with an s   That s why you get undefined

User · Answer

You don t necessarily need to have the parameters inside the URL   For instance  with    stateProvider  state  home       url         views                    templateUrl   home html         controller   MainRootCtrl                 params        foo  null      bar  null          You will be able to send parameters to the state  using either    state go  home    foo  true  bar  1       or  lt a ui-sref  home  foo  true  bar  1    gt Go  lt  a gt    Of course  if you reload the page once on the home state  you will loose the state parameters  as they are not stored anywhere   A full description of this behavior is documented here  under the params row in the state name  stateConfig  section

User · Answer

I ve created an example to show how to  Updated state definition would be      stateProvider      state  home           url     foo bar         views                            templateUrl   tpl home html             controller   MainRootCtrl                                    And this would be the controller    controller  MainRootCtrl   function  scope   state   stateParams                 var foo    stateParams foo    getting fooVal     var bar    stateParams bar    getting barVal               scope state    state current      scope params    stateParams        What we can see is that the state home now has url defined as   url     foo bar     which means  that the params in url are expected as    fooVal bar barValue   These two links will correctly pass arguments into the controller    lt a ui-sref  home  foo   fooVal1   bar   barVal1     gt   lt a ui-sref  home  foo   fooVal2   bar   barVal2     gt    Also  the controller does consume  stateParams instead of  stateParam   Link to doc    URL Parameters   You can check it here  params       There is also new  more granular setting params       As we ve already seen  we can declare parameters as part of url  But with params      configuration - we can extend this definition or even introduce paramters which are not part of the url    state  other         url    other  foo bar       params                here we define default value for foo            we also set squash to false  to force injecting            even the default value into url         foo              value   defaultValue             squash  false                        this parameter is now array            we can pass more items  and expect them as            bar                array   true                        this param is not part of url            it could be passed with  state go or ui-sref          hiddenParam   YES                      Settings available for params are described in the documentation of the  stateProvider  Below is just an extract   value -  object function    specifies the default value for this parameter  This implicitly sets this parameter as optional    array -  boolean     default  false  If true  the param value will be treated as an array of values   squash -  bool string    squash configures how a default parameter value is represented in the URL when the current parameter value is the same as the default value    We can call these params this way      hidden param cannot be passed via url  lt a href    other fooVal bar 1 amp amp bar 2  gt     default foo is skipped  lt a ui-sref  other  bar   4 5     gt    Check it in action here

[javascript] How to pass parameters using ui-sref in ui-router to controller

Examples related to javascript

Examples related to html

Examples related to angularjs

Examples related to angular-ui-router

Examples related to angular-ui