How to pass custom data in $state.go() in angular-ui-router?

[victorwoo]

I want to pass a custom object to another state via $state.go() in UI-Router.

var obj = {
    a: 1,
    b: 2,
    fun: function() {
        console.log('fun');
    }
}
$state.go('users', obj);

But I need to run fun() in target state, so I can't pass this object in URL parameter. In target controller, I tried to fetch the value of obj via $stateParams but got empty object {}:

function UserCtrl($stateParams) {
    conrole.log($stateParams); // empty
}

So how to pass obj to state "users" correctly?

[zhdanovartur]

$stateProvider.state('users', {
    url: '/users',
    controller: 'UsersCtrl',
    params: {
        obj: null
    }
})

function UserCtrl($stateParams) {
    console.log($stateParams);
}

$state.go('users', {obj:yourObj});

[christopherthielen]

@zhdanovartur 👍

[victorwoo]

Sorry but this approach produces the following error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myapp due to:
Error: Invalid params in state 'users.login'
    at Object.stateBuilder.params (http://localhost:9600/bower_components/angular-ui-router/release/angular-ui-router.js:1269:41)
    at registerState (http://localhost:9600/bower_components/angular-ui-router/release/angular-ui-router.js:1390:72)
    at $StateProvider.state (http://localhost:9600/bower_components/angular-ui-router/release/angular-ui-router.js:1702:5)
    at http://localhost:9600/components/users/users.js:10:4
    at Object.invoke (http://localhost:9600/bower_components/angular/angular.js:4203:17)
    at runInvokeQueue (http://localhost:9600/bower_components/angular/angular.js:4109:35)
    at http://localhost:9600/bower_components/angular/angular.js:4118:11
    at forEach (http://localhost:9600/bower_components/angular/angular.js:323:20)
    at loadModules (http://localhost:9600/bower_components/angular/angular.js:4099:5)
    at createInjector (http://localhost:9600/bower_components/angular/angular.js:4025:11)
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=ums.anypay&p1=Erro…F%2Flocalhost%3A9600%2Fbower_components%2Fangular%2Fangular.js%3A4025%3A11)

[christopherthielen]

@victorwoo that message comes from versions of ui-router 0.2.10 and earlier and those versions don't support passing objects as parameters.

[victorwoo]

Yes, it works after upgrading to 0.2.14.
Thank you @zhdanovartur @christopherthielen

[techyaura]

@zhdanovartur @christopherthielen, Thanks a lot !!!!!!. It also solved my problem which i am stuck for half an hour.

[godolatunji]

@zhdanovartur Thanks fam, you just saved me a headache.

[dptole]

+1 to @zhdanovartur even though it is kind of a weird solution.

[rajaneeshgit]

@zhdanovartur @christopherthielen, Thanks a lot..!!! It is really helpful.

[sasanazizi]

@zhdanovartur
i have use your answer but when i'm change state :
Could not resolve 'undefined' from state

what should i do?!

[iurynogueira]

Funcionou demais :D

[Ram-SR]

The values are changing on page refresh. How to prevent that?

[gtzinos]

@zhdanovartur Thank you !!!

[MoatazAbdAlmageed]

@zhdanovartur works but re correct conrole.log($stateParams);

[zhdanovartur]

@MoatazGitHub fixed, thanks)

[jijishthomas]

$http.get('js/mockData.json')
.then(function (res) {
$scope.knowledgeBaseDetails = res.data.knowledgeBaseDetails
$state.go('app.knowledgeBaseDetails');
console.log($scope.knowledgeBaseDetails);
});

i am having issue with the above code,
the state is changing and data is there in console, but its not obtained in DOM

[chiptus]

@jijishthomas when you change the state, the $scope will change. you need to pass the data to the route and get it in the new route from $stateParams

[viT-1]

@zhdanovartur $stateParams is deprecated.
How can i send params to component controller nowadays within $state?

[Vortilion]

@viT-1 Exactly the same.