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

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:

<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

This use case is completely uncovered in the documentation, but I think it's a powerful means on transitioning state without using URLs.

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;});

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

url: '/toState?referer'

Doh!