在表单提交之前与 AngularJS 同步调用服务器答案

【问题标题】：Call server synchronously with AngularJS before form submit在表单提交之前与 AngularJS 同步调用服务器
【发布时间】：2014-05-18 05:51:55
【问题描述】：

我正在将我的 AngularJS 应用程序与支付网关集成，该支付网关需要提交表单以启动收集用户信用卡详细信息的流程。

流程如下：

用户在 HTML 表单中填写信息。
用户点击提交按钮。
onsubmit JavaScript 调用一个 AngularJS 控制器函数，该函数通过 $http 调用我的服务器并获取一些信息。
此信息用于填充表单中的隐藏字段。
表单被提交到支付网关站点，用户在该站点输入他们的信用卡详细信息。

为了使这个过程正常工作，我需要在我从 onsubmit 返回 true 或 false 并允许提交表单之前返回对我的服务器的调用。

所有使用 Promise ($q) 的示例最终都会导致使用回调的代码。如何通过同步调用实现上述流程，还是有其他方法可以实现我的要求？

function allowSubmit() {
        var scope = angular.element(document.querySelector( '#bookingForm' )).scope();

        try {
            var success = scope.createPayment();//createPayment is a method on my controller I need to synchronously call my backend with
            return success;
        } catch (e) {
        //log/alert
            return false;
        }
}


<form id="bookingForm" name="bookingForm" novalidate action=" https://www.example.com/xyz/process.trans" method="POST" onsubmit="return allowSubmit();" >
...
<button type="submit" class="btn btn-success btn-lg pull-right">Payment</button>
...
</form>

【问题讨论】：

标签： javascript angularjs payment-gateway

【解决方案1】：

解决方案看起来是：在没有操作或方法的情况下创建表单，然后设置它们并在控制器中从服务器的回调中提交。

<form id="bookingForm" name="bookingForm" novalidate >
...
<button class="btn btn-success btn-lg pull-right" ng-click="createPaymentAndNavigate(bookingForm.$valid)">Payment</button>
...
</form>

//In server callback on controller
var bookingForm = document.getElementById('bookingForm')
bookingForm.action = "https://www.example.com/xyz/process.trans";
bookingForm.method = "POST";
bookingForm.submit();

【讨论】：