Question

我正在使用条形支付来处理付款。我遵循了这个GITHUB项目和blog。

我的项目有嵌套视图并使用路由器。

我的项目结构看起来像

src
  app
    views
    controllers
    directives
    index.html
    app.js

app.js是手动加载角度模块并具有路由器的地方。

app.js

var myApp = angular.module('myApp', ['ui.router', 'formData']);
myApp.config(function($stateProvider, $urlRouterProvider, $httpProvider) { 
    // routers
}

index.html是包含角度和条带脚本的地方

的index.html

<head lang="en">
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
    <Script src="resources/angular.min.js"></Script>
    <Script src="resources/angular-ui-router.min.js"></Script>
    <script src="app.js"></script>
    <script src="directives/formData/formData.js"></script>
    <script type="text/javascript" 
        src="resources/angular-payments.js">
    </script>
    <script>
        Stripe.setPublishableKey('key')
    </script>
</head>
<div>
    <div ui-view>   
    </div>
</div>

现在我正在尝试将stripData指令包含在条带付款

中

formData.js

    var formData = angular.module('formData',['angularPayments']);
formData.directive('formData',function(){
    return {
        restrict: 'EA',
        scope: {},
        replace: true,
        link: function($scope, element, attributes){

        },
        controller: function($scope,$attrs,$http, $state){
            //This is the callback for strip from the links above as followed
            $scope.stripeCallback = function (code, result) {
                console.log("inside cc callbakc");
                if (result.error) {
                    console.log("credit card error");
                    window.alert('it failed! error: ' + result.error.message);
                } else {
                    console.log(result);
                    console.log("credit card succes "+result.id);
                    window.alert('success! token: ' + result.id);
                }
            };

        },
        templateUrl: 'directives/formData/formData.tpl.html'
    }
});

formData.tpl.html有另一个ui路由器

formData.tpl.html

<form id="signup-form" ng-submit="processForm()">
    <!-- our nested state views will be injected here -->
    <div  ui-view></div
</form>

，其中一个ui路由器html页面是带有此代码的付款页面

<form stripe-form="stripeCallback" name="checkoutForm">>
    <input ng-model="number" placeholder="Card Number" 
             payments-format="card" payments-validate="card" name="card" />
    <input ng-model="expiry" placeholder="Expiration" 
             payments-format="expiry" payments-validate="expiry"                
             name="expiry" />
    <input ng-model="cvc" placeholder="CVC" payments-format="cvc" payments-validate="cvc" name="cvc" />
    <button type="submit">Submit</button>
</form>

我获得了验证，但是当我点击提交时，控制台中没有打印任何内容。我猜js没有被解雇。如果您需要更多信息，请与我们联系。

Answer 1

这将呈现为嵌套表单，这是无效的html。大多数浏览器都是默默无闻的。通过将内部形式视为非形式元素来实现这一点。如果你从注册表单中移出checkoutForm，这应该会让你走上正确的轨道。

条纹结帐不在角度1.x中工作

1 个答案: