AngularJS http Post und Weiterleitung an Zahlung Gateway

Question

In AngularJS möchte ich eine Reihe von Daten veröffentlichen und Redirect auf eine Zahlung URL. Ich habe die folgende Funktion und eine Direktive hinzugefügt, um dies zu erreichen.

Allerdings kann ich nicht das gleiche erreichen und bekam folgende zwei Fehler $interpolate:interr und TypeError: element.submit is not a function Fehler.

Wie löst man den von AngularJS gemeldeten Fehler? Ich bin Anfänger bei AngularJS, konnte also nicht verstehen, was passiert.

$scope.transaction = function() { 
    var data = $scope.details; 
    var formData = { 
     redirectUrl: 'https://payment-gateway-url', 
     redirectMethod: 'POST', 
     redirectData: { 
      id: data.id, 
      para1: data.para1 
     } 
    }; 
    $rootScope.$broadcast('gateway.redirect', formData); 
    $scope.$emit('gateway.redirect'); 
}; 

app.directive('autoSubmitForm', ['$timeout', function($timeout) { 
    return { 
     replace: true, 
     scope: {}, 
     template: '<form action="{{formData.redirectUrl}}" method="{{formData.redirectMethod}}">' + 
      '<div><input name="{{key}}" type="hidden" value="{{val}}" /></div>' + 
      '</form>', 
     link: function($scope, element, $attrs) { 
      $scope.$on($attrs['event'], function(event, data) { 
       $scope.formData = data; 
       console.log('redirecting now!'); 
       $timeout(function() { 
        element.submit(); 
       }) 
      }) 
     } 
    } 
}]); 

<div auto-submit-form event="gateway.redirect"></div> 

Answer 1

Das Problem ist, dass die Richtlinie nicht die Werte der Aktion Interpolations-, Methode, Name und Wert in der Vorlage. Und das Element bezieht sich auf das Div, wo die Direktive definiert ist, also Element ist nicht wirklich das Formular. Sie können es auf die Art und Weise versuchen, wie ich Sie im Plunker zeige. Ich erzeuge das Formular dynamisch und am Ende übergebe ich es mit jQuery.

app.directive('autoSubmitForm', ['$interpolate', function($interpolate) { 
    return { 
    replace: true, 
    scope: { 
     formData: '=' 
    }, 
    template: '', 
    link: function($scope, element, $attrs) { 
     $scope.$on($attrs['event'], function(event, data) { 
     var form = $interpolate('<form action="{{formData.redirectUrl}}" method="{{formData.redirectMethod}}"><div><input name="id" type="text" type="hidden" value="{{formData.redirectData.id}}"/></div></form>')($scope); 
     console.log(form); 
     jQuery(form).appendTo('body').submit(); 
     }) 
    } 
    } 
}]); 

https://plnkr.co/edit/OUu9XgtMttPCri3KvapJ?p=preview

Hoffe, es hilft!