AngularJS http投稿と支払いゲートウェイにリダイレクト

Question

AngularJSでは、データのセットを投稿し、支払いURLにリダイレクトしたいと思います。私はこれを達成するために以下の関数とディレクティブを追加しました。

しかし、私は同じことを達成できず、次の2つのエラーが発生しました$interpolate:interrとTypeError: element.submit is not a functionエラー。

AngularJSによって報告されたエラーを解決するにはどうすればよいですか？私はAngularJSの初心者ですので、何が起きているのか理解できませんでした。

$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

問題は、ディレクティブがテンプレート内アクション、方法、名と値の値を補間されていないということです。 要素は、ディレクティブが定義されているdivを参照しているため、elementは実際にはフォームではありません。あなたはプランナーにあなたを示すようにそれを試すことができます。私はフォームを動的に生成し、最後に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

それが役に立てば幸い！