angularjs指令中的Javascript事件问题

Question

我正在为 HTML 表单做一个简单的指令，它将在两个不同的下拉列表（一个用于月份，一个用于日期）中选择的日期与当前日期进行比较，并在表单中的日期为比现在的旧。但是，它几乎可以正常工作，因为我使用的是 Javascript 的事件“更改”，当我通过“tab”键进入下拉菜单并按向下和向上箭头键更改下拉菜单中的值时，事件当我第二次执行它并且仅当我第二次执行它时不会触发。

使用不同的 Javascript 事件并没有真正帮助，而且我不能使用 ngModelController 功能，因为该指令位于包含两个下拉列表的 div 内。

有人知道如何解决这个问题，或者知道和替代方法来做指令？

JSFiddle

app.directive(  'validateExpirationDate', [function() {
    return {
        link : function (scope, element, attrs) {
            var select = angular.element(element.find('select'));
            var dateYear = new Date().getFullYear();
            var dateMonth = new Date().getMonth();
            dateMonth += 1;
            var validDate=true;
            function checkDate() {
                alert('I have changed');
                validDate=true;
                if (scope.expMonth != null && scope.expYear != null) {
                    if (dateYear >= scope.expYear && dateMonth > scope.expMonth) {
                        validDate=false;
                    }
                }
                scope.$digest(scope.myForm.month.$setValidity('invalidDate', validDate));
            };
            select.on('change', checkDate);
        }
    };
}]);

Answer 1

Select（和大多数其他输入）带有 data-ng-change ，它会在任何更改时触发。因此，您可以这样做：

<select name="month" ng-model="expMonth" data-ng-change="checkDate()">

然后在你的代码中：

           scope.checkDate = function(){
                alert('I have changed');
                validDate=true;
                if (scope.expMonth != null && scope.expYear != null) {
                    if (dateYear >= scope.expYear && dateMonth > scope.expMonth) {
                        validDate=false;
                    }
                }
                scope.myForm.month.$setValidity('invalidDate', validDate)
            };

jsFiddle：http://jsfiddle.net/78teb/