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

Question

我想将 Angular 与 Stripe 支付模式结合使用。脚本标签中没有分配任何价格变量。有没有办法用 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>

Angular :

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

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

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

Answer 1

您可以在 Controller 中设置属性，而不是使用脚本标记

您必须添加自定义按钮

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

在 Controller 中:

 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/