AngularJS - 运行 并在表单提交操作之前等待异步函数

Question

在用户 post 连接到支付服务提供商之前，我要绑定 运行 一个 angular 函数。付款提供商的表格如下所示：

<form action="UrlToPaymentProvider" method="POST">
   <input type="hidden" name="formKeys />
   <input type="submit" />
</form>

AngularJS 控制器文件：

$scope.memberRedirectedToPaymentProvider = function () {
     console.log("Member is redirected");
     $http.post("/my url", {
         orderKey: $scope.model.Order.Key,
     });
}

我可以看到我的日志输出值，但 post 没有。我已经调试，如果我删除表单元素上的 action="UrlToPaymentProvider" method="POST"，post 会工作。

Answer 1

您可以尝试这样的操作：

<form ng-submit="send()" >
    <input />
    ....
</form>

在控制器中：

$scope.send = function() {

     //your custom function here

     $http.post('urlToPost', $scope.myProfile)
     .success(function(data, status, headers, config) {
        console.log("getting success status")
     })
     .error(function(data, status, headers, config) {
        console.log("getting error status")
     });
 }

Answer 2

您可以使用 ng-submit.

而不是使用形式 action

<form name="myForm" ng-submit="memberRedirectedToPaymentProvider()">
<input type="hidden" name="formKeys />
...

<input type="submit" />
</form>

要进行 AJAX POST 调用，您可以使用 angular $http 服务和 post 方法。

$scope.memberRedirectedToPaymentProvider = function () {
     console.log("Member is redirected");
     var url = "/myurl";
     var data = {
         orderKey: $scope.model.Order.Key
     };
     $http.post("/myurl", data).success(function(data, status) {
            $scope.response = data;
     })
}

Answer 3

我了解到您尝试在提交表单时混合使用同步和异步调用。您可以将同步表单发送与 AngularJS 函数混合使用，如 demo fiddle 中所示。默认表单提交被 e.preventDefault(); 阻止，一旦您的 XHR 请求完成，表单将由原生 JavaScript document.getElementById("myForm").submit();.

提交

查看

<div ng-controller="MyCtrl">
  <form method="post" ng-submit="send($event)" action="someURL" id="myForm">
    <input type="hidden" name="formKeys">
    <input type="submit">
  </form>
</div>

AngularJS申请

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope, $http) {

    $scope.send = function (e) {

      //prevent default form send
      e.preventDefault();

      //example request
      $http({
        method: 'GET',
        url: 'https://jsonplaceholder.typicode.com/posts'
      }).then(function(response) {
         //manually submit your form once your async. logic has been procceded.
         document.getElementById("myForm").submit();
      });
    };
});