javascript - 条纹 Angular 形式在指令中不起作用

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 演示了这个问题与“data-key”或“data-image”或“data-*”完全无关。如果它是指令，它根本不起作用。如果以这种方式将脚本标签注入(inject)到 DOM 中，无论出于何种原因，脚本标签实际上都不会获取 checkout.js 并运行脚本。

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 标记

希望对你有帮助