How to send parameters in Angularjs $state.go?

Question

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.

in state URL change /RegistrationOTPVerification/:customerid/:otp and in $state.go('Registration.OTPVerification',{customerid:1,otp:2314}) then it will work. Need in Url and pass in redirection — Vinod Louis
– Vinod Louis, Commented Apr 7, 2017 at 11:27
@VinodLouis OTP and such sensitive information should probably not be part of URL params? — tanmay
– tanmay, Commented Apr 7, 2017 at 11:50
@tanmay Im not supporting for OTP to pass via URL i was just demostrating how to pass path params — Vinod Louis
– Vinod Louis, Commented Apr 7, 2017 at 11:51

tanmay · Accepted Answer · 2017-04-07 11:48:02Z

27

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.

edited Apr 7, 2017 at 11:48

answered Apr 7, 2017 at 11:35

tanmay

7,9112 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Niranjan Godbole Over a year ago

Thank you. I am getting below error. Failed to instantiate module RoslpApp due to: Error: Invalid params in state 'Registration.OTPVerification'

tanmay Over a year ago

@NiranjanGodbole according to this, that message comes from versions of ui-router 0.2.10 and earlier and those versions don't support passing objects as parameters. So you need to update your version of ui-router

Niranjan Godbole Over a year ago

I added <script src="cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/…>. I removed error.but now i am getting error as Cannot read property 'customerid' of undefined

tanmay Over a year ago

@NiranjanGodbole as I have mentioned in answer, you need to inject $stateParams just like $state and $translate in your controller where you have $stateParams.customerid

rolinger Over a year ago

I am using the above solution and its not working. Its routing to the right controller/page but no parameters are being passed. Does params have be defined at the root level of the .state(..) ? I have my params under a views and its not working.

Tundzhel Mert · Accepted Answer · 2017-04-07 11:55:23Z

2

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

edited Apr 7, 2017 at 11:55

answered Apr 7, 2017 at 11:36

Tundzhel Mert

1085 bronze badges

5 Comments

Tundzhel Mert Over a year ago

You can also set the initial values of the params to null.

Niranjan Godbole Over a year ago

Thank you. When i changed my route i got following error. Unknown provider: $stateParams

Tundzhel Mert Over a year ago

@NiranjanGodbole you should add it to the controller you are trying to get the params

Tundzhel Mert Over a year ago

@NiranjanGodbole I've updated the answer to fix provider error too

Niranjan Godbole Over a year ago

@Mert i am getting below error. Failed to instantiate module RoslpApp due to: Error: Invalid params in state 'Registration.OTPVerification'

Aks1357 · Accepted Answer · 2017-04-07 11:32:56Z

Link - https://ui-router.github.io/ng1/docs/0.3.1/index.html#/api/ui.router.state.$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);
    }]);
})();

Wintergreen · Accepted Answer · 2017-04-07 11:55:38Z

0

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

edited Apr 7, 2017 at 11:55

answered Apr 7, 2017 at 11:45

Wintergreen

2341 silver badge9 bronze badges

4 Comments

Niranjan Godbole Over a year ago

Thank you. If i put params: { customerid: null, OTP:null }, i am getting error. Do i need to inject anything to work with params?

Wintergreen Over a year ago

no . you can set initial values as null. Which type of error you are getting??.

Niranjan Godbole Over a year ago

Invalid params in state 'Registration.OTPVerification' I am getting this error

Niranjan Godbole Over a year ago

i am getting below error Failed to instantiate module RoslpApp due to: Error: Invalid params in state 'Registration.OTPVerification'

rolinger · Accepted Answer · 2019-08-05 16:49:35Z

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'

        }
      }
    })

Collectives™ on Stack Overflow

How to send parameters in Angularjs $state.go?

5 Answers 5

5 Comments

5 Comments

Comments

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

5 Comments

Comments

4 Comments

Comments

Related