Angularjs 角度付款的ng模型不起作用

我正在尝试添加，以便将stripe.com支付处理集成到我的AngularJS web应用程序中

我将中的代码复制到angular-payments.js文件中，并将中的代码复制到localhost:8888/stripe.html中，使其正常工作

然而，当我尝试将此代码集成到我的AngularJS web应用程序时，ng模型不起作用

下面是我如何集成代码的。我有一个带有app.js的单页web应用程序，其代码如下：

angular.module('io.config', []).value('io.config', {
'password': 'json/config.password.json',
    ....
    ....
});
...
...
angular.module('app.modules', ['app.config']);
var app = angular.module('app', ['ngCookies', 'io', 'ui', 'bs', '$strap',
'app.controllers', 'app.directives', 'app.factories', 'app.filters', 'app.modules', 'app.config']);

angular.module('app')
.config(['$routeProvider', function($routeProvider) {
    var _view_ = 'view/', _app_ = 'app/';
    $routeProvider
    .when('/user/invite',           {templateUrl:_view_+'app/invite.html'})

       <form stripe-form="handleStripe">

          <div class="span3">
            <label for="">Card number</label>
            <input type="text" class="input-block-level" ng-model="number" payments-validate="card" payments-format="card" />
          </div>

          <div class="span1">
            <label for="">Expiry</label>
            <input type="text" class="input-block-level" ng-model="expiry" payments-validate="expiry" payments-format="expiry" />
          </div>

          <div class="span3">
            <label for="">Name on card </label>
            <input type="text" class="input-block-level">
          </div>

          <div class="span1">
            <label for="">CVC</label>
            <input type="text" class="input-block-level" ng-model="cvc" payments-validate="cvc" payments-format="cvc" />
          </div>

          <div class="span4">
            <button type="submit" class="btn btn-primary btn-large">Submit</button>
          </div>
          number:{{number}}, expiry:{{expiry}}, cvc:{{cvc}}
        </form>

因此，我将“angularPayments”添加到：

var app = angular.module('app', ['ngCookies', 'io', 'ui', 'bs', '$strap',
'app.controllers', 'app.directives', 'app.factories', 'app.filters', 'app.modules', 'app.config', 'angularPayments']);

我还有一个app.route.js文件，其中包含以下代码：

angular.module('io.config', []).value('io.config', {
'password': 'json/config.password.json',
    ....
    ....
});
...
...
angular.module('app.modules', ['app.config']);
var app = angular.module('app', ['ngCookies', 'io', 'ui', 'bs', '$strap',
'app.controllers', 'app.directives', 'app.factories', 'app.filters', 'app.modules', 'app.config']);

angular.module('app')
.config(['$routeProvider', function($routeProvider) {
    var _view_ = 'view/', _app_ = 'app/';
    $routeProvider
    .when('/user/invite',           {templateUrl:_view_+'app/invite.html'})

       <form stripe-form="handleStripe">

          <div class="span3">
            <label for="">Card number</label>
            <input type="text" class="input-block-level" ng-model="number" payments-validate="card" payments-format="card" />
          </div>

          <div class="span1">
            <label for="">Expiry</label>
            <input type="text" class="input-block-level" ng-model="expiry" payments-validate="expiry" payments-format="expiry" />
          </div>

          <div class="span3">
            <label for="">Name on card </label>
            <input type="text" class="input-block-level">
          </div>

          <div class="span1">
            <label for="">CVC</label>
            <input type="text" class="input-block-level" ng-model="cvc" payments-validate="cvc" payments-format="cvc" />
          </div>

          <div class="span4">
            <button type="submit" class="btn btn-primary btn-large">Submit</button>
          </div>
          number:{{number}}, expiry:{{expiry}}, cvc:{{cvc}}
        </form>

我在app.route.js中添加了以下内容：

    .when('/user/buy',              {templateUrl:_view_+'app/buy.html'})

.when('/user/buy',  {templateUrl:_view_+'app/buy.html', controller:PaymentCtrl})

我将localhost:8888/stripe.html中的代码复制到app/buy.html中，后者映射到localhost:8888/#/user/buy

例外情况是，我从buy.html中取出以下行并将它们放入index.html中：

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="scripts/modules/angular-payments.js"></script>

因此，当我提交此表单时，Stripe返回一个状态为402的错误，因为没有向Stripe传递任何内容

我尝试将ng模型更改为数据ng模型，但没有效果。我尝试将以下代码放入一个单独的文件：scripts/controllers/payment.js：

function PaymentCtrl($scope) {

  $scope.handleStripe = function(status, response){
    if(response.error) {
      // there was an error. Fix it.
    } else {
      // got stripe token, now charge it or smt
      token = response.id
    }
  }
}

并将以下内容添加到app.route.js：

    .when('/user/buy',              {templateUrl:_view_+'app/buy.html'})

.when('/user/buy',  {templateUrl:_view_+'app/buy.html', controller:PaymentCtrl})

并在buy.html中更改以下内容：

data-ng-controller="MainController"

    $scope.payment = {};

    $scope.copyvariables = function() {
        $scope.number = $scope.payment.number;
        $scope.expiry = $scope.payment.expiry;
        $scope.cvc = $scope.payment.cvc;
    }

致：

但还是无济于事

有人能告诉我如何让ng模型变量在buy.html中工作吗？提前谢谢。

我从你那里得到了一个提示，我用一个复杂的解决方案解决了这个问题

我在buy.html中将以下代码添加到MainController：

data-ng-controller="MainController"

    $scope.payment = {};

    $scope.copyvariables = function() {
        $scope.number = $scope.payment.number;
        $scope.expiry = $scope.payment.expiry;
        $scope.cvc = $scope.payment.cvc;
    }

然后我在ng模型变量中添加了“payment.”，如下所示：

          <div class="span7">
            <label for="">Card number</label>
            <input id="number" name="number" type="text" class="input-block-level" data-ng-model="payment.number" payments-validate="card" payments-format="card" required />
          </div>

          <div class="span4" style="border: 1px solid red">
            <label for="">Expiry</label>
            <input type="text" class="input-block-level" data-ng-model="payment.expiry" payments-validate="expiry" payments-format="expiry" required />
          </div>

          <div class="span8">
            <label for="">Name on card </label>
            <input id="name" name="name" type="text" class="input-block-level" required />
          </div>

          <div class="span3">
            <label for="">CVC</label>
            <input type="text" class="input-block-level" data-ng-model="payment.cvc" payments-validate="cvc" payments-format="cvc" required />
          </div>

我仍然不知道为什么我需要这个buy.html，但是stripe.html没有这个额外的代码就可以工作