How to send parameters in Angularjs $state.go?

I am developing AngularJS application. I am trying to send values in $state.go to different states. I am trying as below.

This is my state:

$stateProvider .state('Registration.OTPVerification', { url: '/RegistrationOTPVerification', templateUrl: 'Registration/RegistrationOTP.html', controller: 'RegistrationOTPVerification' }); 

I am trying as below.

var customerid = response.data.ID; var OTP = response.data.OTP; $state.go('Registration.OTPVerification', customerid,OTP); 

I am trying to receive parameters in below controller.

(function () { angular.module('RoslpApp').controller('RegistrationOTPVerification', ['$scope', '$http', '$translatePartialLoader', '$translate', '$state', function ($scope, $http, $translatePartialLoader, $translate, $state, $stateParams) { var customerid = $stateParams.customerid; var OTP = $stateParams.OTP; alert(customerid); }]); })(); 

I am not able to receive parameters. Any help would be appreciated. Thank you.

5 Answers

You need to have those as params in order to be able to send them through state. Like this:

$stateProvider .state('Registration.OTPVerification', { url: '/RegistrationOTPVerification', params: { customerid: null, OTP: null }, templateUrl: 'Registration/RegistrationOTP.html', controller: 'RegistrationOTPVerification' }); 

Now, you can use $state.go like following:

$state.go('Registration.OTPVerification', { customerid: 123, OTP: 2323 }); 

Finally, you can access them way you are using $stateParams.customerid and $stateParams.OTP but make sure you have $stateParams injected just like you have $state and $translate injected.

Just use $state.go as this:

$state.go('Registration.OTPVerification', { customerid: response.data.ID, OTP: response.data.OTP }); 

Also you need to define the url parameters in the $stateProvider.state as:

$stateProvider .state('Registration.OTPVerification', { url: '/RegistrationOTPVerification', params: { customerid: '', OTP: '' }, templateUrl: 'Registration/RegistrationOTP.html', controller: 'RegistrationOTPVerification' }); 

Here's the updated controller to get the params:

(function () { angular.module('RoslpApp').controller('RegistrationOTPVerification', ['$scope', '$http', '$translatePartialLoader', '$translate', '$state', '$stateParams', function ($scope, $http, $translatePartialLoader, $translate, $state, $stateParams) { var customerid = $stateParams.customerid; var OTP = $stateParams.OTP; alert(customerid); }]); })(); 

Link - .$state

Syntax - go(to, params, options) params - A map of the parameters that will be sent to the state, will populate $stateParams

$stateProvider.state('Registration.OTPVerification', { url: '/RegistrationOTPVerification/:data', templateUrl: 'Registration/RegistrationOTP.html', controller: 'RegistrationOTPVerification' }); $state.go('Registration.OTPVerification', response); (function () { angular.module('RoslpApp').controller('RegistrationOTPVerification', ['$scope', '$http', '$translatePartialLoader', '$translate', '$state', function ($scope, $http, $translatePartialLoader, $translate, $state, $stateParams) { var customerid = $stateParams.data.ID; var OTP = $stateParams.data.OTP; alert(customerid); }]); })(); 

Try this. $stateProvider .state('Registration.OTPVerification', { url: '/RegistrationOTPVerification', params: { customerid: null, OTP:null }, templateUrl: 'Registration/RegistrationOTP.html', controller: 'RegistrationOTPVerification' }) 

when calling pass parameter like this:

 $state.go('Registration.OTPVerification',{customerid: "gfdg",OTP:"4545"}); 

I wanted to add my two cents to this. There is a gotchya in the above solutions that cause others issues. I use views in my states and was placing the params ($stateParams) in the views and it wasn't working. The params must exist at the root level of the state controller. I am not certain if you can pass them listed under the views...and if you can how you would go about passing/retrieving the values.

Here is my initial state controller definition:

 .state('tab.clubs', { cache: true, url: '/clubs', views: { 'tab-clubs': { templateUrl: 'templates/tab-clubs.html', controller: 'ClubCtrl', params: { 'refreshClubs' : 0, 'pushAction' : 0, 'pushSub' : null, 'pushMsg' : null, 'pushCode' : null } } } }) 

Then in controller:

var payload = { 'pushAction' : 1, 'pushSub' : "blah", 'pushMsg' : "more blah blah", 'pushCode' : code } $state.go('tab.clubs',payload) ; 

It would route to the proper controller/page, but no parameters were being passed. Until I changed the state provider to the following:

 .state('tab.clubs', { cache: true, url: '/clubs', params: { 'refreshClubs' : 0, 'pushAction' : 0, 'pushSub' : null, 'pushMsg' : null, 'pushCode' : null }, views: { 'tab-clubs': { templateUrl: 'templates/tab-clubs.html', controller: 'ClubCtrl' } } })