javascript - 如何在脚本标签中使用AngularJS？

我想在此Stripe付款模式中使用Angular。没有在脚本标签中分配任何价格变量。有没有办法用Angular做到这一点？

的HTML

<div ng-app="app">
<div ng-controller="ctrl">
<form action="" method="POST">
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_" data-amount={{price}} data-name="Example Product" data-description="Example Product {{price}}" data-image="/128x128.png">
  </script>
   <br>Price ${{price}}
</form>
</div>
</div>

角度：

var app = angular.module('app',[]);

function ctrl($scope) {
    $scope.price = "77";
}

示例：http://jsfiddle.net/ppq1orso/

最佳答案

您可以在控制器中设置属性，而不使用脚本标签

您必须添加一个自定义按钮

 <button type="submit" ng-click="pay()" class="stripe-button-el" style="visibility: visible;"><span style="display: block; min-height: 30px;">Pay with Card</span></button>

并在控制器中：

 var handler = StripeCheckout.configure({
        image: "https://stripe.com/img/documentation/checkout/marketplace.png",
        key:'pk_test_'
    });

    $scope.pay = function(){
        handler.open({
            name: 'Example Product',
            description: 'Example Product ' + $scope.price,
            amount: $scope.price * 100
        });
        e.preventDefault();
    };

这项工作符合预期：

http://jsfiddle.net/ppq1orso/3/