1

我想为信用卡到期日建立一个验证指令。一种型号有月份，另一种型号有年份。如果日期过期，两个模型都需要知道另一个模型的值才能进行计算。

我得到它的工作指令（它被称为validExpiryDate）接收月份和年份的模型作为参数，然后监视更改以设置元素的有效性。

但是，每当我valid-expiry-date在输入字段上应用 ng-model 的内容时，都不会显示。输入字段只是保持空白。

这是指令：

app.directive('validExpiryDate', function(Stripe) {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            month: '=',
            year: '='
        },
        link: function(scope, elem, attrs, controller) {
            var state = function() { return  {month: scope.month, year: scope.year};};
            scope.$watch(state, function(v) {
                var isValid = Stripe.card.validateExpiry(scope.month, scope.year);
                controller.$setValidity('expiry-date', isValid);
            }, true);
        }
    };
});

这是我当前的模板代码：

<input id="e1" type="text" ng-model="a" month="a" year="b" />
<input id="e2" type="text" ng-model="b" month="a" year="b" />
<input id="e3" type="text" ng-model="c" valid-expiry-date month="a" year="b" />
<!-- works, but doesnt show the input of ng-model c in e3  -->
<br />
<input id="e4" type="text" ng-model="a" valid-expiry-date month="a" year="b" />
<input id="e5" type="text" ng-model="b" valid-expiry-date month="a" year="b" />
<!-- e4 and e5 show the correct valid class, but do not the model -->

知道为什么不显示内容吗？

编辑

正如 Ajay 指出的那样，问题在于范围。在此处阅读更多内容：具有范围破坏输入的 ngmodel 的指令

根据这个新见解，我将我的模型调整为：

app.directive('validExpiryDate', function(Stripe) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attrs, controller) {
            var month = null;
            var year = null;

            var setValidity = function() {
                var isValid = Stripe.card.validateExpiry(month, year);
                controller.$setValidity('expiry-date', isValid);
            };

            scope.$watch(attrs.month, function(v) {
                month = v;
                setValidity()
            });

            scope.$watch(attrs.year, function(v) {
                year = v;
                setValidity()
            });
        }
    };
});

不是很漂亮，但它有效。

4

0 回答 0