angularjs ui-router passing dynamic data from form field into resolve

Question

I am trying to use resolve in order to ensure that data has been loaded prior to a view state displaying on screen. This resolve is dependent on a selection which the user will have made in a previous state.

As such, I need to perform a get request with a parameter.

The problem is that I have no idea how to set the parameter from within the app. I have tried

.get('https://.../questions', {params: {gender: $scope.user.gender}})
.get('https://.../questions', {params: {gender: user.gender}})
.get('https://.../questions', {params: {gender: vm.user.gender}})

The only thing which works is:

.get('https://.../questions', {params: {gender: 'Male'}})

Bigger code snippet below to give some context.

 .state('questionnaire', {
    url: '/questionnaire',
    templateUrl: 'templates/questionnaire.html',
    controller: "QuestionnaireController as vm",
    resolve: {
      practice:  function($http){
        return $http
          .get('https://.../...')
          .then (function (data) {
            return data;
          });
      }
    }
  })
  .state('questionnaire.consent', {
    url: '/consent',
    templateUrl: 'templates/questionnaire-consent.html'
  })
  .state('questionnaire.questions', {
    url: '/questions',
    templateUrl: 'templates/questionnaire-questions.html',
    resolve: {
      questions:  function($http, $scope) {
        return $http


  // Failed Attempts
  //      .get('https://.../questions', {params: {gender: $scope.user.gender}})
  //      .get('https://.../questions', {params: {gender: $scope.user.gender}})
  //      .get('https://.../questions', {params: {gender: user.gender}})
  //      .get('https://.../questions', {params: {gender: vm.user.gender}})

  // Works but incorrectly hard coded

  //      .get('https://.../questions', {params: {gender: 'Male'}})

          .then (
            function (res) {
              console.log(res.data);
              return res;
            },
            function(errors) {
              console.log('Errors', errors);
            }
          );
      }
    }
  })

Tom Arad · Accepted Answer · 2015-04-25 21:31:34Z

1

Use the $stateParams service. It lets you pass parameters to your states, for example you can pass the gender as a parameter:

.state('questionnaire.questions', {
  url: '/questions/:gender', // Gender is the parameter.
  templateUrl: 'templates/questionnaire-questions.html',
  resolve: {
    questions:  function($http, $scope, $stateParams) {
      // $stateParams.gender is the gender that was given in the url.

You can give the gender as a parameter when using a href: example.com/questions/male or by using the second parameter of $state.go: $state.go('questions', {gender: 'male'});

Read about it in the ui-router documentation.

answered Apr 25, 2015 at 21:31

Tom Arad

2512 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

angularjs ui-router passing dynamic data from form field into resolve

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related