Как использовать AngularJS в теге скрипта?

Question

Я хотел бы использовать Угловые с этой полосой оплаты модальные. Ни одна из переменных цены не назначается в теге скрипта. Есть ли способ сделать это с помощью 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/

Answer 1

Вы можете установить свойства в контроллере, а не с помощью тега сценария

У Вас будет для добавления пользовательской кнопки

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