//index.js
angular.module(''myApp'',[]);
myApp.directive(''myDirective'',function() {return {};});

//index.js
angular.module(''myApp'',[])
.directive(''myDirective'',function() {
  return {
    restrict: ''AE'',
    priority: 1,
    template: ''<div>hello world</div>''
  };
})
.directive(''myDirective1'',function() {
  return {
    restrict: ''AE'',
    priority: 3,
    terminal: true
  };
})

<!-- index.html -->
<div my-directive my-directive1></div>

//index.js
angular.module(''myApp'',[])
.directive(''myDirective'',function() {
  return {
    restrict: ''A'',
    template: ''<div>hello world</div>'',
    replace: true/false
  };  
}) 

 <!-- index.html -->
<my-directive></my-directive>

<!-- index.html -->
<div my-directive>world</div>

//index.js
angular.module(''myApp'',[])
.dirctive(''myDirective'',function() {
  return {
    restrict: ''EA'', 
    transclude: true,
    template: ''<div>hello <span ng-transclude></span></div>''
  };
})

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

<form name="payment" ng-submit="vm.submit()">
<div>
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- a Stripe Element will be inserted here. -->
    </div>
</div>
<buttontype="submit" ng-disabled="vm.submitting">Pay!</button>
<div ng-show="vm.cardError">
  <div>
     <p>* {{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.

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,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"></div>
      </label>
    </div>
    <div>
        <buttontype="submit">Pay!</button>
        <buttontype="button" ng-click="cancel()">Cancel</button>
    </div>
    <div>
      <div></div>
    </div>
</form>