angularjs – Angular Stripe – 将条带支付表格转换为条纹元素

删除表单输入字段并将其替换为Stripe Card元素后,我的表单如下所示：

<form name="payment" ng-submit="vm.submit()">
<div class="row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- a Stripe Element will be inserted here. -->
    </div>
</div>
<button class="btn btn-primary" type="submit" ng-disabled="vm.submitting">Pay!</button>
<div ng-show="vm.cardError" class="row">
  <div class="has-error">
     <p class="help-block">* {{vm.cardError}}</p>
  </div>
</div>
</form>

以前在Angular中,当提交表单时,我正在从控制器处理submit()和stripeResponseHandler.使用新更改更新我的Angular Controller后,我的控制器现在看起来像这样：

function PaymentController() {
        var vm = this;
        var elements = stripe.elements();
        var style = {
                          base: {
                            color: '#32325d',lineHeight: '24px',fontFamily: 'Helvetica Neue',fontSmoothing: 'antialiased',fontSize: '16px','::placeholder': {
                              color: '#aab7c4'
                            }
                          },invalid: {
                            color: '#fa755a',iconColor: '#fa755a'
                          }
                     };
        vm.card = elements.create('card',{style: style});
        vm.card.mount('#card-element');

        // Handle real-time validation errors from the card Element.
        vm.card.addEventListener('change',function(event) {
              if (event.error) {
                vm.cardError = event.error.message;
              } else {
                vm.cardError = '';
              }
        });

        function submit() {
            vm.cardError = '';
            vm.submitting = true;
            createToken();
        }

        // Send data directly to stripe 
        function createToken() {
            stripe.createToken(vm.card).then(function(result) {
              if (result.error) {
                vm.cardError = result.error.message;
                vm.submitting = false;
              } else {
                // Send the token to your server
                stripeTokenHandler(result.token);
              }
            });
        }

        // Response Handler callback to handle the response from Stripe server
        function stripeTokenHandler(token) {
            vm.tokenData = {
                token: token.id
            };
            .. Process the rest in server ...
        }
}

上面的代码按原样运行.但我对这些感到困惑：

1)由于Stripe现在使用DOM Manipulation将卡元素插入表单中,这是否会使我的上述方法错误,如Angular方式？意思是,我不应该再在Controller中执行这些操作并将它们移到指令中吗？或者应该没有必要,因为操纵的元素使用stripe.elements().

2)如果我确实需要将它们放在指令中,我只是不确定如何将上面的转换为angular指令.它首先通过挂载来操纵元素(可以添加到指令链接函数中),但后来它继续使用表单提交和事件处理程序的卡元素.我是否需要在指令链接本身内完成所有这些,在指令控制器中提交并在链接中进行元素操作？

我很困惑,坚持在这里做什么.如果我做错了,有人可以给我一个如何解决这个问题的样本吗？

我正在使用Angular 1.5.