angularjs - ディレクティブには ng-model の表示に問題があります

Question

クレジット カードの有効期限の検証ディレクティブを作成したいと考えています。1 つのモデルには月があり、もう 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()
            });
        }
    };
});

本当にきれいではありませんが、うまくいきます。