Question

为什么这不起作用？（因为，如果脚本实际上没有运行并创建付款按钮，为什么它不在指令中。）

.directive('stripeForm', ['$log', function($log) {
  return function(scope, elem, attrs) {
    var markup = '<form action="/charge" method="POST">\
      <script\
      src="https://checkout.stripe.com/checkout.js" class="stripe-button"\
      data-key="xxx"\
      data-image="/square-image.png"\
      data-name="Demo Site"\
      data-description="2 widgets ($20.00)"\
      data-amount="2000">\
      </script>\
    </form>';
    elem.append(angular.element(markup));
  };
}]);

以下的plunkr证明了这个问题与＆＃34; data-key＆＃34;没有任何关系。或＆＃34;数据图像＆＃34;或＆＃34;数据 - *＆＃34;。如果它是一个指令，它根本不起作用。无论出于何种原因，脚本标记实际上都不会获取checkout.js并运行脚本（如果它以这种方式注入DOM）。

http://plnkr.co/edit/GZC0XlqVM2b1J3ozpHJA?p=preview

我唯一的问题是为什么？

Answer 1

查看此plunker：

var form =  document.createElement("form");;
form.action = "charge";
form.method = "POST";
var script =  document.createElement("script");
script.src = "https://checkout.stripe.com/checkout.js";
script.className = "stripe-button";
script.setAttribute("data-key", "pk_test_6pRNASCoBOKtIshFeQd4XMUh");
script.setAttribute("data-image", "square-image.png");
script.setAttribute("data-name", "Demo Site");
script.setAttribute("data-description", "2 widgets ($20.00)");
script.setAttribute("data-amount", "2000");

form.appendChild(script);

elem.append(angular.element(form));

我所做的是手动创建元素作为本机对象。也许问题是使用angular.element（）

转换给定的html标记

希望有所帮助

Stripe Angular Form不在指令中工作

1 个答案: