angularjs - Angular ui 路由器的动态参数

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 发送到我的后端，以便它可以正确呈现诗歌.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 作为参数(注意，这不是注入(inject)，更多详细信息请参阅文档站点)，并使用参数“filterBy”作为模板 URL 的一部分。在你的例子中，它是 formData。

注意1:您必须传递一个字符串。如果 formData 是一个对象，则不能将其用作 templateUrl 的一部分，甚至可能无法将其作为 stateParams 的一部分进行传递。也许您想要其中的特定字段？像“formType”之类的东西？

注2:正如mb21提到的，这一切与后端无关。如果您想发送表单数据，请执行 REST 调用。路由应该只涉及客户端。