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

Question

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

取出表单输入字段，并与磁条卡元素替换它们后，我的形式如下：

<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操纵在表单中插入卡片元素，这是否使我的上述方法错误，如在Angular方式？意思是说，我不应该在Controller中做这些事情，而是将它们移到一个指令上？或者应该没有必要，因为被操纵的元素使用stripe.elements()。 2）如果我确实需要将它们放在指令内，我只是不确定如何将上述内容转换为角度指令。它首先通过挂载元素来操作元素（可以将其添加到指令链接函数中），但稍后它会继续使用card元素来提交表单和事件处理程序。我是否需要在指令链接本身内部完成所有这些操作，使指令控制器中的提交和链接中的元素操作？

我很困惑，在这里做什么卡住了。有人可以给我一个关于如何解决这个问题的例子吗？

我正在使用Angular 1.5。

Answer 1

我现在已经将控制器更改为指令，并将所有jQuery代码和角码放入链接函数中。这是我的指令代码看起来像在更新后：现在

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>