AngularJS - запуск и ожидание асинхронной функции перед отправкой формы

Question

Я пытаюсь запустить угловую функцию до того, как пользователь будет отправлен поставщику платежей. Форма для платежного провайдера выглядит так:

<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,
     });
}

Я вижу, что мой журнал выводит значение, а сообщение - нет. Я отлажен, и сообщение работает, если я удаляю action="UrlToPaymentProvider" method="POST" на элементе формы.

Answer 1

Я понимаю, что вы пытаетесь смешать синхронный и асинхронный вызов при отправке формы. Вы можете смешать синхронную отправку формы с функцией AngularJS, как в этой демонстрационной скрипке. Отправка формы по умолчанию запрещена 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();
      });
    };
});

Answer 2

Вы можете попробовать что-то вроде этого:

<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 3

Вместо использования формы action ты можешь использовать ng-submit,

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

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

Для выполнения вызова AJAX POST вы можете использовать угловой сервис $ 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;
     })
}