Angularjs 指令在显示ng模型时出现问题

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

指令（称为

validExpiryDate

）接收月份和年份的模型作为参数，然后监视更改以设置元素的有效性

但是，每当我在输入字段上应用

有效失效日期

时，ng模型的内容都不会显示。输入字段只是保持空白

这是指令：

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 -->

---

不是很漂亮，但它可以工作。

您不能将ngmodelcontroller与隔离作用域一起使用，那么我如何解决这个问题？我需要有一个ng模型和两个双向模型（月和年）。如果你有（完全）其他的方法来做这件事，我很想听听他们。我在这里读了更多关于这个问题的文章，有几个范围：并对指令做了修改。新版本可以工作，但看起来并不漂亮。不知怎的，我不能同时看这两种表情。

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