角条纹 - 将条纹支付表格转换为条纹元素

Question

我曾经有Angular Stripe Checkout表单,我正在尝试将我的表单更新为最近推出的新Stripe Card Elements.

删除表单输入字段并将其替换为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>

以前在角,提交表单的时候,我正在处理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指令.它首先通过挂载来操纵元素(可以添加到指令链接函数中),但是后来它继续使用card元素表单提交和事件处理程序.我是否需要在指令链接本身内完成所有这些,在指令控制器中提交并在链接中进行元素操作？

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

我正在使用Angular 1.5.

Answer 1

现在，我已将Controller更改为指令，并将所有jquery和angular代码放入Link函数中。这是我的指令代码在更新后的样子：

function stripeForm() {

        // Link Function
        function link(scope, element, attrs) {

            scope.submitCard = submitCard;

            var elements = stripe.elements();
            var style = {
                          iconStyle: 'solid',
                          style: {
                            base: {
                              iconColor: '#8898AA',
                              color: '#000',
                              lineHeight: '36px',
                              fontWeight: 300,
                              fontFamily: 'Helvetica Neue',
                              fontSize: '19px',

                              '::placeholder': {
                                color: '#8898AA',
                              },
                            },
                            invalid: {
                              iconColor: '#e85746',
                              color: '#e85746',
                            }
                          },
                          classes: {
                            focus: 'is-focused',
                            empty: 'is-empty',
                          },
                        };
            var card = elements.create('card', style);
            card.mount('#card-element');

            // Handle real-time validation errors from the card Element.
            card.on('change', function(event) {
                setOutcome(event);
            });

            // Form Submit Button Click
            function submitCard() {
                var errorElement = document.querySelector('.error');
                errorElement.classList.remove('visible');
                createToken();
            }

            // Send data directly to stripe server to create a token (uses stripe.js)
            function createToken() {
                stripe.createToken(card).then(setOutcome);
            }

            // Common SetOutcome Function
            function setOutcome(result) {
                var errorElement = document.querySelector('.error');
                errorElement.classList.remove('visible');
                if (result.token) {
                  // Use the token to create a charge or a customer
                  stripeTokenHandler(result.token);
                } else if (result.error) {
                  errorElement.textContent = result.error.message;
                  errorElement.classList.add('visible');
                }
            }

            // Response Handler callback to handle the response from Stripe server
            function stripeTokenHandler(token) {
                ..send to server ...
            }
        }

        // DIRECTIVE
        return {
            restrict: 'A',
            replace: true,
            templateUrl: 'payment/PaymentForm.html'
            link: link
        }
    }

我的HTML文件现在如下所示：

<form ng-submit="submitCard()">
    <div>
      <label>
        <div id="card-element" class="field"></div>
      </label>
    </div>
    <div>
        <button class="btn btn-primary pull-right" type="submit">Pay!</button>
        <button class="btn btn-danger pull-left" type="button" ng-click="cancel()">Cancel</button>
    </div>
    <div>
      <div class="error"></div>
    </div>
</form>