javascript - AngularJS http 发布并重定向到支付网关

Question

在 AngularJS 中，我想发布一组数据并重定向到付款网址。我添加了以下函数和指令来实现此目的。

但是我无法实现相同的目标，并得到以下两个错误 $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

问题是指令没有插入action、method、name 和value 的值在模板中。而 element 指的是定义指令的 div，因此 element 并不是真正的表单。您可以按照我在 plunker 中向您展示的方式进行尝试。我动态生成表单，最后使用 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

希望对您有所帮助!