带有角度 ui 路由器的动态参数

问题描述

我想知道如何在更改状态和发送请求以从后端获取模板时包含参数.

I am wondering how to include parameters when changing state and sending the request to get the template from the backend.

这是我的应用程序:

angular.module('questionnaireApp', ['ngAnimate', 'ui.router', 'ui.bootstrap'])

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

$stateProvider

  .state('questionnaire', {
   url: '/questionnaire',
   templateUrl: 'questionnaire/questionnaire.html',
   controller: 'questionnaireCtrl'
  })

  .state('questionnaire.receiver_name', {
    url: '/receiver_name',
    templateUrl: 'questionnaire/receiver_name.html'
  })

  .state('questionnaire.location', {
    url: '/location',
    templateUrl: 'questionnaire/location.html'
  })

  .state('poem', {
    url: '/poem',
    templateUrl: 'questionnaire/poem.html',
    controller: 'questionnaireCtrl'
  });

$urlRouterProvider.otherwise('/questionnaire/receiver_name');
}])

.controller('questionnaireCtrl', ['$scope', '$http', '$state', function($scope, $http, $state) {

  $scope.formData = {};
}]);

我将用户输入保存在 $scope.formData 中.我需要将它包含在我的请求中才能呈现 questionnaire/poem.html.

I am saving user input in $scope.formData. I need to include it in my request to be able to render questionnaire/poem.html.

类似于:

.state('poem', {
  url: '/poem',
  templateUrl: 'questionnaire/poem' + $scope.formData + '.html',
  controller: 'questionnaireCtrl'
});

我该怎么做?

或者是否有任何变体可以帮助我将 formData 发送到我的后端，以便它可以正确呈现诗.html 页面?

Or is there any variant that can help me send the formData to my backend so that it can render the poem.html page properly?

推荐答案

我终于实现了我的目标:只用一个 HTTP 请求检索这首诗.

I finally managed to achieve my goal: retrieve the poem with one HTTP request only.

这样做:

• 我将 HTML 模板存储在 Angular 应用程序中，以便它只需要检索 JSON 数据
• 表单数据通过常规 http 帖子发送
• 诗歌数据以JSON格式发回
• 由于 Angular 数据绑定，这首诗得以显示

角度代码:

angular.module('thePoetApp').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

$stateProvider

// route to show our basic form (/questionnaire)
.state('questionnaire', {
  url: '/questionnaire',
  templateUrl: 'questionnaire/questionnaire.html',
})

// nested states
// each of these sections will have their own view
// url will be nested (/questionnaire/receiver_name)
.state('questionnaire.receiver_name', {
  url: '/receiver_name',
  template: '<div class="col-md-3 text-left ng-scope"></div><div class="form-container col-md-6 text-center ng-scope"><div class="form-group"><label for="receiver_name">Receiver Name:</label><input name="receiver_name" ng-model="formData.receiver_name" receiver_name="receiver_name" required="" type="text" class="ng-pristine ng-invalid ng-invalid-required"></div><div class="form-group"><label for="receiver_sex">Receiver Sex:</label><input name="receiver_sex" ng-model="formData.receiver_sex" receiver_sex="receiver_sex" required="" type="radio" value="male" class="ng-pristine ng-invalid ng-invalid-required">Male<input name="receiver_sex" ng-model="formData.receiver_sex" receiver_sex="receiver_sex" required="" type="radio" value="female" class="ng-pristine ng-invalid ng-invalid-required">Female</div></div><div class="col-md-3 text-right ng-scope"><a class="btn btn-primary" ui-sref="questionnaire.location">Next Step</a></div>',
})

// url will be /questionnaire/location
.state('questionnaire.location', {
  url: '/location',
  template: '<div class="col-md-3 text-left ng-scope"><a class="btn btn-primary" ui-sref="questionnaire.receiver_name">Previous Step</a></div><div class="form-container col-md-6 text-center ng-scope"><div class="form-group"><label for="location">Location:</label><input location="location" name="location" ng-model="formData.location" required="" type="text" class="ng-pristine ng-invalid ng-invalid-required"></div></div><div class="col-md-3 text-right ng-scope"><a class="btn btn-primary" ui-sref="questionnaire.relationship">Next Step</a></div>'
})

// url will be /questionnaire/relationship
.state('questionnaire.relationship', {
  url: '/relationship',
  template: '<div class="col-md-3 text-left ng-scope"><a class="btn btn-primary" ui-sref="questionnaire.location">Previous Step</a></div><div class="form-container col-md-6 text-center ng-scope"><div class="form-group ng-scope" ng-controller="RelationshipsTypeaheadCtrl"><label for="relationship">Relationship:</label><input autocomplete="off" name="relationship" ng-model="formData.relationship" relationship="relationship" required="" type="text" typeahead-editable="false" typeahead="suggestion for suggestion in relationships($viewValue)" class="ng-pristine ng-invalid ng-invalid-required"><ul class="dropdown-menu ng-isolate-scope"><!-- ngRepeat: match in matches --></ul></div></div><div class="col-md-3 text-right ng-scope"><a class="btn btn-primary" ui-sref="questionnaire.trait">Next Step</a></div>'
})

// url will be /questionnaire/trait
.state('questionnaire.trait', {
  url: '/trait',
  template: '<div class="col-md-3 text-left ng-scope"><a class="btn btn-primary" ui-sref="questionnaire.relationship">Previous Step</a></div><div class="form-container col-md-6 text-center ng-scope"><div class="form-group ng-scope" ng-controller="TraitsTypeaheadCtrl"><label for="trait">Trait:</label><input autocomplete="off" name="trait" ng-model="formData.trait" trait="trait" required="" type="text" typeahead-editable="false" typeahead="suggestion for suggestion in traits($viewValue)" class="ng-pristine ng-invalid ng-invalid-required"><ul class="dropdown-menu ng-isolate-scope"><!-- ngRepeat: match in matches --></ul></div></div><div class="col-md-3 text-right ng-scope"><a class="btn btn-primary" ui-sref="questionnaire.message">Next Step</a></div>'
})

// url will be /questionnaire/message
.state('questionnaire.message', {
  url: '/message',
  template: '<div class="col-md-3 text-left ng-scope"><a class="btn btn-primary" ui-sref="questionnaire.trait">Previous Step</a></div><div class="form-container col-md-6 text-center ng-scope"><div class="form-group ng-scope" ng-controller="MessagesTypeaheadCtrl"><label for="message">Message:</label><input autocomplete="off" name="message" ng-model="formData.message" message="message" required="" type="text" typeahead-editable="false" typeahead="suggestion for suggestion in messages($viewValue)" class="ng-pristine ng-invalid ng-invalid-required"><ul class="dropdown-menu ng-isolate-scope"><!-- ngRepeat: match in matches --></ul></div></div>'
})

.state('poem', {
  url: '/poem',
  template: '<div class="poem"><p>{{ poem.title }}</p><p><div>{{ poem.intro_verse.line_one}}</div><div>{{ poem.intro_verse.line_two}}</div><div>{{ poem.intro_verse.line_three}}</div><div>{{ poem.intro_verse.line_four}}</div><div>{{ poem.intro_verse.line_five}}</div></p><p><div>{{ poem.trait_verse.line_one}}</div><div>{{ poem.trait_verse.line_two}}</div><div>{{ poem.trait_verse.line_three}}</div><div>{{ poem.trait_verse.line_four}}</div><div>{{ poem.trait_verse.line_five}}</div></p><p><div>{{ poem.message_verse.line_one}}</div><div>{{ poem.message_verse.line_two}}</div><div>{{ poem.message_verse.line_three}}</div><div>{{ poem.message_verse.line_four}}</div><div>{{ poem.message_verse.line_five}}</div></p><div class="text-center"><a class="btn btn-warning" ui-sref="questionnaire.receiver_name">Restart</a></div></div>'
});

// catch all route
// send users to the receiver_name page
$urlRouterProvider.otherwise('/questionnaire/receiver_name');

角度控制器:

postParams =
{"questionnaire":
  {
   "receiver_name": $scope.formData.receiver_name,
   "receiver_sex": $scope.formData.receiver_sex,
   "location": $scope.formData.location,
   "relationship": $scope.formData.relationship,
   "trait_category": $scope.formData.trait,
   "message_category": $scope.formData.message
  }
}
 // send post request
$http({
  method  : 'POST',
  url     : 'api/questionnaire/poem',
  data    : $.param(postParams),  // pass in data as strings
  headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
})
.success(function(data) {
    if (data.success) {
      $scope.poem = data.poem;
      $scope.formData = {};
      $state.go('poem');
    }
});

$scope.poem = data.poem' 设置诗歌数据，以便 {{poem.title }} 等在转到 诗状态.

$scope.poem = data.poem' sets the poem data so that {{ poem.title }} and so on get replaced when going to the poem state.

这篇关于带有角度 ui 路由器的动态参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！