我想从 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
字段中的 url 已正确填写。
Controller 中的createOrder
函数是这样的:
$scope.createOrder = function () {
Payment.start($scope.selectedProduct)
.then(function (response) {
$scope.orderNumber = response.data.orderNumber;
});
};
问题是在打开实际操作 URL 之前,隐藏的输入 orderNumber 没有被填充。因此,发布的数据不正确。
关于如何处理这个问题有什么想法吗?我正在使用 angularjs 1.2.16。
最佳答案
问题是 Payment.start
在 promise 的决议中异步设置 $scope.orderNumber
,但表单提交会立即发生。通常,您可以通过省略表单上的 action
属性来阻止基于 Angular 的表单中的默认操作,因为 Angular 是为基于客户端的应用程序设计的。但在您的情况下,您希望进行正常的 http 发布,这是不寻常的。这让我们踏上了“最佳实践”领域之外的旅程。
因此,承认这是一个不寻常的用例,我将提供一个有点 hackish 的解决方案。您可以省略表单中的 action 属性,然后在从 Payment.start
解决 promise 时添加它,然后才触发表单提交:
$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();
});
};
这是未经测试的,但我认为它应该适合你。
关于javascript - 服务调用后的 angularjs 表单操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24244851/