How to access state params (ui-sref) without including them in URL propery of state in angularjs

Question

This question is might be similar to this but with different requirements. As I was not able to make comment (required 50 points) I am replicating the question.

I want to simply access the parameters sent from ui-sref in template inside the controller without mentioning them in state URL .

Something like using the link below for transitioning the state to home with foo and bar parameters:

<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a>

Receiving foo and bar values in a controller:

state('home', {
      url: '/:foo',
      views: {
        '***whatIsThis***': {
          templateUrl: 'home.html',
          controller: 'MainRootCtrl'    
        },

    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? I want to get bar as well without adding it to URL

The name of the service is $stateParams (not $stateParam). If you want to define additional params that won't appear in the URL, use the params config (see documentation). Please look at the documentation and delete the question. — hon2a
possible duplicate of How to pass parameters using ui-sref in ui-router to controller — hon2a
@hon2a: thanks man, but I am getting error "Invalid params in state" while using them. can you provide a sample(google it but couldnt find,sorry I am new to AngularJs so might be searched with wrong keyword or...) I am trying to send to param from sref as shown in question and try to capture the one which is not mentioned in URL using params property and throw the mentioned error. — Sohail Faruqui

hon2a hon2a · Accepted Answer · 2014-12-16T09:03:10

If some of your params are not supposed to show up in the URL, you need to combine url and params:

.state('home', {
    url: '/:foo',
    params: {
        foo: 'default value of foo',
        bar: 'default value of bar'
    },
    ...
})

and then use $stateParams properly:

.controller('SomeController', ['$scope', '$stateParams', function ($scope, $stateParams) {
    // ... (use $stateParams)
}])

(see documentation).

And, if you're still stuck, please take a look at this working codepen demo.

How to access state params (ui-sref) without including them in URL propery of state in angularjs

1 Answers