Угловая полоса - конвертирующая полоса Форма оплаты на полосу элементов

Question

У меня была форма заказа с угловыми полосами, и я пытаюсь обновить форму до нового 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 от обработки контроллер. После обновления моего Угловое контроллера с новыми изменениями, мой контроллер теперь выглядит следующим образом:

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 для вставки элементов карты внутри формы, делает ли это мой метод выше, как в угловом режиме? Смысл, не следует ли мне больше делать это в контроллере и вместо этого переместить их в директиву? Или это не должно быть необходимо, поскольку управляемый элемент использует stripe.elements().

2) Если мне нужно, чтобы они были внутри директивы, я просто не уверен, как преобразовать вышеуказанное в угловую директиву. Сначала он манипулирует элементом, монтируя его (который можно добавить к функции директивной ссылки), но позже он продолжает использовать элемент для обработчиков форм и обработчиков событий. Должен ли я делать все это внутри самой директивной ссылки, есть ли подчинения внутри директивного контроллера и манипуляции с элементами в ссылке?

Я так смущен и застрял в том, что делать здесь. Может ли кто-нибудь дать мне образец того, как я могу обратиться к этому, если я ошибаюсь?

Я использую Angular 1.5.

Answer 1

Теперь я изменил контроллер на директиву и поместил все jquery и угловые коды внутри функции 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>