Я пытаюсь добавить angular-payments, чтобы интегрировать обработку платежей stripe.com в мое веб-приложение AngularJS.ng-модель от угловых платежей не работает
Я продублировал код от 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, ng-модель не работает.
Вот как я интегрировал код. У меня есть одностраничный веб-приложение с app.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']);
Итак, я добавил «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'})
Я продублировал код с локального хоста: 8888/stripe.html в приложении/buy.html, который отображает на локальный: 8888/#/пользователя/купить
Исключения, что я взял следующие строки из покупки .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, поскольку никакие значения не возвращаются из нг-модели:
number:{{number}}, expiry:{{expiry}}, cvc:{{cvc}}
Следовательно, когда я представить эту форму, нашивки возвращает ошибку со статусом = 402, потому что ничего не передается в Stripe.
Я попытался изменить ng-модель на data-ng-model, но безрезультатно. Я попытался положить следующий код в отдельный файл: скрипты/контроллеры/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? Заранее спасибо.