如何在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.

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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'

        }
      }
    })