Question

我希望从html表单中的POST数据到默认操作URL，但是一个隐藏的输入取决于从服务调用返回的数据。当我使用ng-submit时$scope在POST完成之前服务调用后没有更新。我无法使用Ajax POST，因为我在POST之后获得了一个HTML页面。

表格如下：

<form name="payment" role="form" class="form-inline" ng-show="!loading" method="POST" action="{{paymentUrl}}" ng-submit="createOrder()" novalidate>
   <input type="hidden" id="responseUrl" name="responseUrl" value="{{postPaymentUrl}}"/>
   <input type="hidden" id="orderNumber" name="orderNumber" value="{{orderNumber}}"/>
   <select class="form-control" id="paymentMethodBrand" name="paymentMethodBrand">
      <option ng-repeat="paymentMethod in paymentMethods | orderBy:'method'" value="{{paymentMethod.method}}">{{paymentMethod.method}}</option>
   </select>
   <button type="submit" class="btn btn-default" translate="BUY"></button>
</form>

action字段中的网址已正确填充。

控制器中的createOrder功能是：

$scope.createOrder = function () {
  Payment.start($scope.selectedProduct)
    .then(function (response) {
          $scope.orderNumber = response.data.orderNumber;
  });
};

问题是隐藏的输入orderNumber在打开实际操作URL之前不会被填充。因此，发布的数据不正确。

有关如何处理此问题的任何想法？我使用angularjs 1.2.16。

Answer 1

问题是Payment.start在承诺的解决方案上异步设置$scope.orderNumber，但表单提交立即发生。通常，您可以通过省略表单上的action属性来阻止基于Angular的表单中的默认操作，因为Angular是为基于客户端的应用程序设计的。但在你的情况下，你想要正常的http帖子发生，这是不寻常的。这需要我们去外面旅行＆＃34;最佳实践＆＃34;土地。

因此，承认这是一个不寻常的用例，我将提供一个有点hackish的解决方案。您可以从表单中省略action属性，然后在从Payment.start解析promise时添加它，然后只触发表单submit：

$scope.createOrder = function () {
  Payment.start($scope.selectedProduct)
    .then(function (response) {
          $scope.orderNumber = response.data.orderNumber;
          var form = $('#form-id');
          form.attr('action', $scope.paymentUrl);
          form.submit();
  });
};

这是未经测试的，但我认为它应该适合你。

angularjs在服务调用后形成动作

1 个答案: