Javascript 服务调用后的angularjs表单操作
我想Javascript 服务调用后的angularjs表单操作,javascript,angularjs,angular-promise,Javascript,Angularjs,Angular Promise,我想POST将html表单中的数据发布到默认操作url,但一个隐藏的输入取决于服务调用返回的数据。当我使用ng submit时,$scope在POST完成之前,在服务呼叫之后不会得到更新。我不能使用AjaxPOST,因为在POST之后会有一个HTML页面 表单如下所示: <form name="payment" role="form" class="form-inline" ng-show="!loading" method="POST" action="{{paymentUrl}}" n
POST
将html表单中的数据发布到默认操作url,但一个隐藏的输入取决于服务调用返回的数据。当我使用ng submit
时,$scope
在POST
完成之前,在服务呼叫之后不会得到更新。我不能使用AjaxPOST
,因为在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>
问题在于,在打开实际操作URL之前,隐藏的输入orderNumber不会被填充。因此,发布的数据是不正确的
你对如何处理这个问题有什么想法吗?我使用的是angularjs 1.2.16。问题在于
付款。start
在解决承诺时异步设置$scope.orderNumber
,但表单提交会立即发生。通常,如果Angular是为基于客户端的应用程序而设计的,则可以通过省略表单上的action
属性来防止Angular表单中的默认操作。但在您的情况下,您希望正常的http post发生,这是不寻常的。这将带领我们走出“最佳实践”领域
所以,承认这是一个不寻常的使用案例,我将提供一个有点黑客的解决方案。您可以从表单中省略action属性,然后在从付款解决承诺时添加它。开始,然后触发表单提交:
$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();
});
};
这是未经测试的,但我认为它应该适合你
$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();
});
};