Question

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

这是我的应用：

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。

类似的东西：

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

我该怎么做？

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

Answer 1

你可以通过使templateUrl成为一个函数来实现。看一下这个例子，取自ui-router文档（https://github.com/angular-ui/ui-router/wiki）：

$stateProvider.state('contacts', {
  templateUrl: function ($stateParams){
      return '/partials/contacts.' + $stateParams.filterBy + '.html';
  }
})

在上面的例子中，我们将$ stateParams作为参数（注意，它不是注入，更多关于doc网站的详细信息）并使用参数“filterBy”作为模板url的一部分。在你的情况下，它是formData。

注1：您必须传递一个字符串。如果formData是一个对象，则不能将其用作templateUrl的一部分，并且您可能甚至无法将其作为stateParams的一部分传递。也许你想要一个特定的领域呢？类似'formType'的东西？

注2：正如mb21所述，所有这些都与后端无关。如果要发送表单数据，请执行REST调用。路由应该只涉及客户端。

Answer 2

questionnaire/poem.html应该是一个Angular html模板文件，不会由服务器动态生成。

要保存数据，请使用Angular的http service向想要数据的服务器发送请求。

如果您在PageA上有ControllerA的数据，并且需要在PageQ上使用ControllerQ，那么两个控制器之间应该share the data using a factory。无需涉及服务器。

Answer 3

我终于设法实现了我的目标：仅使用一个HTTP请求检索诗歌。

要做到这一点：

我将HTML模板存储在Angular应用程序中，以便它只需要检索JSON数据
表单数据与常规http post
诗歌数据以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 }}状态时替换poem等。

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

3 个答案: