1

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

我将https://github.com/laurihy/angular-payments/blob/master/lib/angular-payments.js中的代码复制到我的 angular-payments.js 文件和https://github.com/中的代码laurihy/angular-payments/blob/master/example/index.html进入 localhost:8888/stripe.html 并让它工作。

但是，当我尝试将此代码集成到我的 AngularJS Web 应用程序时，ng-model 不起作用。

这是我集成代码的方式。我有一个带有 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']);

因此，我将“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('app')
.config(['$routeProvider', function($routeProvider) {
    var _view_ = 'view/', _app_ = 'app/';
    $routeProvider
    .when('/user/invite',           {templateUrl:_view_+'app/invite.html'})

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

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

我将 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>

我的 index.html 有这个代码：

<!DOCTYPE html>
<html class="no-js" lang="en" data-ng-app="app">
...
<link href="./css/bootstrap.css" rel="stylesheet">
...
<body class="ng-cloak" data-ng-controller="AppCtrl">
...
<div data-ng-view></div>
...
<script src="bower_components/angular-io/src/scripts/ie.js"></script>
...
<script src="bower_components/angular-complete/angular.js"></script>
...
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="scripts/modules/angular-payments.js"></script>
...

stripe.html 和 buy.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>

但是，以下代码在 stripe.html 中有效，但在 buy.html 中无效，因为 ng-model 没有返回值：

          number:{{number}}, expiry:{{expiry}}, cvc:{{cvc}}

因此，当我提交此表单时，Stripe 返回一个 status = 402 的错误，因为没有任何东西传递给 Stripe。

我尝试将 ng-model 更改为 data-ng-model，但无济于事。我尝试将以下代码放入单独的文件中：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', controller:PaymentCtrl})

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

data-ng-controller="MainController"

到：

data-ng-controller="PaymentCtrl"

但仍然无济于事。

谁能告诉我如何让 ng-model 变量在 buy.html 中工作？提前致谢。

4

1 回答 1

0

我从Ng-model 得到了一个提示，它不会更新控制器值，我用一个复杂的解决方案解决了这个问题。

我在 buy.html 中的 MainController 中添加了以下代码：

    $scope.payment = {};

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

然后我添加了“付款”。到 ng-model 变量，如下所示：

          <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>

现在下面的代码可以工作了，并且值被传递给了 Stripe：

number:{{number}}, expiry:{{expiry}}, cvc:{{cvc}}

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

于 2013-11-13T01:41:10.837 回答