将条带支付数据添加到AngularJS中的“多部件向导”表单

Question

我试图在角度JS中创建一个三页向导，最后一部分会收到付款细节。

但是，通过查看Stripe文档，我注意到与Stripe相关的任何表单元素都没有名称属性。

目前，我使用按钮链接到向导中的下一步，并且只有一个表单，它一起提交。三页向导基于本教程：

https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router

你可以看到我正在使用：

<div class="col-xs-6 col-xs-offset-3">
    <a ui-sref="form.payment" class="btn btn-danger">
    Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
    </a>
</div>

导航到下一个表单页面。

我的问题是 - 如何在同一表单中提交绑定到模型的对象（formData），和条带数据。这可能吗？ 如果是这样 - 我怎么能这样做并仍然保持向导功能？

以下是我的控制器：

angular.module('formApp')
.controller('formController', ['$scope', 'Appointment', function($scope, Appointment) {

    // we will store all of our form data in this object
    $scope.formData = {};
    $scope.formData.appintment_date = "";
    $scope.opened        = false;
    /*$scope.momentDate = moment($scope.formData.date);*/
    $scope.time1 = new Date();
    $scope.showMeridian = true;
    //Datepicker
    $scope.dateOptions = {
        'year-format': "'yy'",
        'show-weeks' : false, 
        'show-time':true
    };

    // function to process the form
    $scope.processForm = function() {
            console.log($scope.formData);
         var date = moment($scope.formData.date).format("dddd, MMMM Do YYYY, h:mm:ss a");
            /*console.log(date);*/
            var app = new Appointment($scope.formData);
            //console.log(app);
            app.$save();
    };
}]);

home.html的

<div class="page-header text-center">           
                        <!-- the links to our nested states using relative paths -->
                        <!-- add the active class if the state matches our ui-sref -->
                        <div id="status-buttons" class="text-center">
                            <a ui-sref-active="active" ui-sref=".date"><span>1</span> Date</a>
                            <a ui-sref-active="active" ui-sref=".address"><span>2</span> Address</a>
                            <a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
                        </div>
                    </div>
<!-- use ng-submit to catch the form submission and use our Angular function -->
            <form id="signup-form" ng-submit="processForm()">
              <!-- our nested state views will be injected here -->
               <div id="form-views" ui-view></div>
            </form>

形状interests.html

<div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" name="name" ng-model="formData.name" required>
</div>

<div class="form-group">
    <label for="email">Email</label>
    <input type="text" class="form-control" name="email" ng-model="formData.email" required>
</div>

<div class="form-group">
    <label for="email">Address</label>
   <input type="text" class="form-control" name="address" ng-model="formData.address_1" placeholder="e.g. Unit and Street"required>
    <input type="text" class="form-control" name="address" ng-model="formData.city" placeholder="City e.g. Toronto">
    <input type="text" class="form-control" name="address" ng-model="formData.postcode" placeholder="Postal Code" required>

</div>

<div class="form-group">
    <label for="email">Phone Number</label>
   <input type="text" class="form-control" name="address" ng-model="formData.phone" placeholder="(416) - 222 5555"required>

</div>

<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">

    <a ui-sref="form.payment" class="btn btn-danger">
    Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
    </a>
</div>
</div>

form-payment.html - 请注意缺少名称属性。

<!-- form-payment.html -->
  <span class="payment-errors"></span>
    <div class="form-group">
    <label for="card_number">Card Number</label>
      <input type="text" class="form-control" size="20" data-stripe="number"/>
    </div>
  <div class="form-row">
    <label for="CVC"> CVC</label>
      <input type="text" class="form-control" size="4" data-stripe="cvc"/>
  </div>
  <div class="form-row">
    <label for="exp_month"> Expiration (Month)</label>
      <input type="text" class="form-control" size="2" data-stripe="exp-month"/>
 <label for="exp_month"> Expiration (Year)</label>
     <input type="text" class="form-control" size="4" data-stripe="exp-year"/>
  </div>
<div class="text-center">
    <span class="glyphicon glyphicon-heart"></span>
    <h3>Thanks For Your Money!</h3>
    <button type="submit" id="submitButton" class="btn">Submit</button>
</div>