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

I'm integrating my AngularJS app with a payment gateway that requires a form to be submitted to kick-off the process to collect the users credit card details.

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

The flow is as follows:

流程如下:

1. User fills in information in an HTML form.

用户以HTML表单填写信息。

2. User clicks submit button.

用户点击提交按钮。

3. onsubmit JavaScript calls an AngularJS controller function that calls my server via $http and gets some information back.

onsubmit JavaScript调用AngularJS控制器函数,该函数通过$ http调用我的服务器并获取一些信息。

4. This information is used to populate hidden fields in the form.

此信息用于填充表单中的隐藏字段。

5. The form is submitted to the payment gateway site and the user enters their credit card details on that site.

表单将提交到支付网关站点,用户在该站点上输入其信用卡详细信息。

For this process to work, I need the call to my server to return before I return true or false from onsubmit and allow the form to be submitted.

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

All the examples using promises ($q) ultimately lead to code that uses callbacks. How do I achieve the above flow with a synchronous call, or is there another way to achieve what I require?

所有使用promises($ 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>

1 个解决方案

#1

The solution looks to be: Create the form without an action or method, then set them and submit on callback from server in the controller.

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

<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();