Angular Ben Drucker的信用卡脚本不起作用

时间:2015-07-16 21:04:04

标签: javascript html angularjs

我正在尝试将Ben Drucker的信用卡验证(https://github.com/bendrucker/angular-credit-cards)整合到我们的Angular应用程序中。

在App.js中,我有以下声明:

 angular
  .module('flyvipApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'mm.foundation',
    'ui.router',
    'credit-cards',
    'ui.router.stateHelper'
  ])

以下是表单代码:

<div id="sidePanelContent">

    <a ui-sref="^" ui-sref-opts="{reload: true}" class="closeSidePanel"><img
        src="images/admin/botao-fechar.png" alt="Fechar"></a>

    <h1>Pagamento do Voo</h1>
    <form name="ccForm">
        <div>
            <p ng-show="flight">
                <strong>ID:</strong> {{flight.flightid}}
            </p>
            <p ng-show="flight">
                <strong>Voo:</strong> {{flight.fromairport.name}} &#10141;
                {{flight.toairport.name}}
            </p>
            <p ng-show="flight">
                <strong>Horário:</strong> {{flight.dateofdeparture |
                formatDateTime}}h
            </p>
            <p ng-show="flight">
                <strong>Lugares disponíveis:</strong> {{flight.availableseats}}
            </p>
            <p ng-show="flight">
                <strong>Aeronave:</strong> {{flight.airplane.name}}
            </p>
            <p ng-show="flight">
                <strong>Preço atual:</strong> R$ {{flight.price | formatPrice}}
            </p>
        </div>

        <h1>Dados do Cartao</h1>
        <div class="large-12 columns no-paddingleft">
            <label> Nome no cartao:</label> <input type="text"
                ng-model="cardName" /><br />
        </div>
        <div>
            <label> Tipo de cartao:</label> <select ng-model="cardType"
                ng-options="type as type for type in ['Visa', 'American Express', 'MasterCard']"></select><br />
        </div>
        <div class="large-12 columns no-paddingleft">
            <label>Numero do cartao:</label> <input type="text"
                ng-model="card.number" cc-number cc-type="cardType" /><br />
        </div>
        <label>Codigo de seguranca:</label> <input type="text"
            ng-model="card.cvc" cc-type="cardNumber.$type" /><br /> <label>Data
            Expiracao:</label>
        <div cc-exp>
            <div class="col-xs-3">
                <label>MES:</label> <input type="text" ng-model="card.exp_month"
                    cc-exp-month />
            </div>
            <div class="col-xs-3">
                <label>ANO:</label><input type="text" ng-model="card.exp_year"
                    cc-exp-year /><br />
            </div>
        </div>

        <script>
            console.log(card.number + "   " + card.exp_month);
        </script>
        <button class="button" ng-click="DoPayment(flight.flightid)"
            ng-disabled="!ccForm.ccNumber.$valid">Pagar com Cartao de
            Credito</button>
    </form>
</div>

表单出错&#34;错误:无法找到变量:&#34; card&#34;。

我想过,一旦我加入了#34;信用卡&#34; app.js卡中的模块将自动声明。

感谢

0 个答案:

没有答案