How to pass an object into a state using UI-router?

angular-ui-router, angularjs, javascript

Solution

In version 0.2.13, You should be able to pass objects into $state.go,

$state.go('myState', {myParam: {some: 'thing'}})

$stateProvider.state('myState', {
                url: '/myState/{myParam:json}',
                params: {myParam: null}, ...

and then access the parameter in your controller.

$stateParams.myParam //should be {some: 'thing'}

myParam will not show up in the URL.

Source:

See the comment by christopherthielen https://github.com/angular-ui/ui-router/issues/983, reproduced here for convenience:

christopherthielen: Yes, this should be working now in 0.2.13.

.state('foo', { url: '/foo/:param1?param2', params: { param3: null } // null is the default value });

$state.go('foo', { param1: 'bar', param2: 'baz', param3: { id: 35, name: 'what' } });

$stateParams in 'foo' is now { param1: 'bar', param2: 'baz', param3: { id: 35, name: 'what' } }

url is /foo/bar?param2=baz.

Problem

I'd like to be able to transition to a state and a pass an arbitrary object using ui-router. I'm aware that usually `$stateParams` is used, but I believe this value is inserted into the URL, and I don't want users to be able to bookmark this data. I'd like to do something like this. ``` $state.transitionTo('newState', {myObj: {foo: 'bar'}}); function myCtrl($stateParams) { console.log($stateParams.myObj); // -> {foo: 'bar'} }; ``` Is there a way to do this without encoding values into the URL?

Original source