角度條紋 - 將條紋付款表格轉換爲條紋元素

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>