无法在angular指令中读取未定义的属性“year”

Question

我试图在角度js中构建一个表单，我在git hub https://gist.github.com/lrvick/8789669上找到了来自Irvick的漂亮脚本来询问信用卡详细信息，并且我在此基础上构建了我的信息。

这是我的HTML：

<div class="row">
    <!-- Credit Card Type -->
    <div class="form-group col-xs-4" ng-class="{ 'has-error' : registerForm.CartaDiCreditoCarta.$invalid && creditSubmitted }">
        <label>Credit Card Type</label>
        <input type="text" name="CartaDiCreditoCarta" class="form-control" ng-model="formData.CartaDiCreditoCarta" required>
        <p ng-show="registerForm.CartaDiCreditoCarta.$invalid && creditSubmitted" class="help-block">Your Credit Card type is required.</p>
    </div>
    <!-- Credit Card Number -->
    <div class="form-group col-xs-4" ng-class="{ 'has-error' : registerForm.CartaDiCreditoNumero.$invalid && creditSubmitted }">
        <label>Credit Card Number</label>
        <input type="text" name="CartaDiCreditoNumero"
               data-ng-pattern="/^[0-9]+$/"
               data-ng-minlength="15"
               maxlength="19"
               class="form-control" ng-model="formData.CartaDiCreditoNumero" required>

        <p ng-show="registerForm.CartaDiCreditoNumero.$error.required && creditSubmitted" class="help-block">Your Credit Card Number is required.</p>
        <p ng-show="registerForm.CartaDiCreditoNumero.$error.minlength && creditSubmitted" class="help-block">Credit card must be 15-19 digits</p>
        <p ng-show="registerForm.CartaDiCreditoNumero.$error.pattern" class="help-block">Credit card must consist of only numbers</p>
    </div>

    <!-- Security Code -->
    <div class="form-group col-xs-4" ng-class="{ 'has-error' : registerForm.CartaDiCreditoNumeroSecurityCode.$invalid && creditSubmitted }">
        <label>Security Code</label>
        <input type="text" name="CartaDiCreditoNumeroSecurityCode"
               data-ng-pattern="/^[0-9]+$/"
               data-ng-minlength="3"
               maxlength="4"
               class="form-control" ng-model="formData.CartaDiCreditoNumeroSecurityCode" required>
        <p ng-show="registerForm.CartaDiCreditoNumeroSecurityCode.$error.required && creditSubmitted" class="help-block">Your Security Code is required.</p>
        <p ng-show="registerForm.CartaDiCreditoNumeroSecurityCode.$error.pattern && creditSubmitted" class="help-block">Security code must contain only numbers</p>
        <p ng-show="registerForm.CartaDiCreditoNumeroSecurityCode.$error.minlength && creditSubmitted" class="help-block">Security code must be 3-4 digits</p>
    </div>


</div>

<div class="row">
    <!-- First name -->
    <div class="form-group col-xs-4" ng-class="{ 'has-error' : registerForm.CartaDiCreditoTitolareNome.$invalid && creditSubmitted }">
        <label>Credit Card owner First Name</label>
        <input type="text" name="CartaDiCreditoTitolareNome" maxlength="64" class="form-control" ng-model="formData.CartaDiCreditoTitolareNome" required>
        <p ng-show="registerForm.CartaDiCreditoTitolareNome.$invalid && creditSubmitted" class="help-block">Credit Card owner first name is required.</p>
    </div>

    <div class="form-group col-xs-4" ng-class="{ 'has-error' : registerForm.CartaDiCreditoTitolareCognome.$invalid && creditSubmitted }">
        <label>Credit Card owner Last Name</label>
        <input type="text" name="CartaDiCreditoTitolareCognome" maxlength="64" class="form-control" ng-model="formData.CartaDiCreditoTitolareCognome" required>
        <p ng-show="registerForm.CartaDiCreditoTitolareCognome.$invalid && creditSubmitted" class="help-block">Credit Card owner last name is required.</p>
    </div>
    <div class="form-group col-xs-2">
        <label>Month</label>
        <label class="select">
            <select ng-model="ccinfo.month" name="month" data-card-expiration required>
                <option disabled selected value=""> - </option>
                <option ng-repeat="month in months" value="{{$index+1}}"> {{$index+1}} - {{month}}</option>
            </select>
        </label>
        <p ng-show="registerForm.month.$error.required && creditSubmitted" class="help-block">Expiration month required</p>
    </div>
    <div class="form-group col-xs-2">
        <label>Year</label>
        <label class="select">
            <select ng-model="ccinfo.year" name="year" required>
                <option disabled selected value=""> - </option>
                <option ng-repeat="year in [] | range:currentYear:currentYear+13">{{year}}</option>
            </select>
        </label>
        <ul ng-show="registerForm.month.$invalid && creditSubmitted">
            <li ng-show="registerForm.year.$error.required" class="help-block">Expiration year required</li>
            <li ng-show="registerForm.month.$error.invalid" class="help-block">Provided expiration date is invalid</li>
        </ul>
    </div>


    {{ formData.CartaDiCreditoScadenza }}

    <!-- Date of Expiry -->
    <div class="form-group col-xs-4" ng-class="{ 'has-error' : registerForm.CartaDiCreditoScadenza.$invalid && creditSubmitted }">
        <label>Date of Expiry</label>
        <input type="text" name="CartaDiCreditoScadenza" class="form-control" ng-model="formData.CartaDiCreditoScadenza" required>
        <p ng-show="registerForm.CartaDiCreditoScadenza.$invalid && creditSubmitted" class="help-block">Date of Expiry is required.</p>
    </div>
</div>

这是我的js：

app.controller('mainController', ['$scope', '$window', '$location', '$anchorScroll', '$http', '$locale',
function ($scope, $http, $locale) {

    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    month = month < 10 ? '0' + month : month;
    var day = now.getDate();
    day = day < 10 ? '0' + day : day;

    var dateShort = year + '/' + month + '/' + day;


    $scope.isActive = false;
    $scope.onReviewStep = false;

    $scope.riepilogo = function (isValid) {
        $scope.submitted = true;
        $scope.formData.TipoPagamento = "BankTransfer";

        //credit card
        $scope.currentYear = year;
        $scope.currentMonth = month;
        $scope.months = $locale.DATETIME_FORMATS.MONTH;
        $scope.ccinfo = {};


        if (isValid) {
            $scope.onReviewStep = true;
        }
    }


    // function to submit the form after all validation has occurred            
    $scope.submitForm = function (isValid) {
        $scope.creditSubmitted = true;


        // check to make sure the form is completely valid
        if (isValid) {

        }

    };

}]);

app.directive('cardExpiration', function () {
  var directive =
        {
            require: 'ngModel'
        , link: function (scope, elm, attrs, ctrl) {
            scope.$watch('[ccinfo.month,ccinfo.year]', function (value) {
                ctrl.$setValidity('invalid', true)
                if (scope.ccinfo.year == scope.currentYear
                     && scope.ccinfo.month <= scope.currentMonth
                   ) {
                    ctrl.$setValidity('invalid', false)
                }
                return value
            }, true)
        }
        }
      return directive
  }
)

    app.filter('range', function () {
      var filter =
        function (arr, lower, upper) {
            for (var i = lower; i <= upper; i++) arr.push(i)
            return arr
        }
      return filter
  }
  )

我的表单停止工作，控制台正在给我错误TypeError：无法读取属性＆＃39;年份＆＃39;未定义指向我的指令代码，它基本上与我在git hub上找到的相同。

我还要做的就是获得一个月份和年份的范围，如下所示：

 $scope.formData.CCexpiringDate = $scope.ccinfo.month + "/" + $scope.ccinfo.year;

但它似乎并没有绑定我选择的两个值。

我错过了什么？ 谢谢！

编辑： 这是一个不起作用的jsfiddle，但至少它具有比上面更好的格式： http://jsfiddle.net/f3as14ye/