Question

我想为信用卡到期日建立验证指令。一个模型有月份，另一个有年份。如果日期过期，两个模型都需要知道其他模型的价值以便计算机。

我认为该指令（称为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指出的那样，问题在于范围。在此处阅读更多内容：Directive with scope breaking ngmodel of an input

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

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()
            });
        }
    };
});

不是很漂亮，但它有效。

指令在显示ng-model时存在问题

0 个答案: