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.
35 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' } } })
