angularjs指令中的Javascript事件问题

Javascript event issue inside angularjs directive

本文关键字：事件 问题 Javascript 指令 angularjs      更新时间：2023-09-26

我一直在做一个简单的指令，一个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);
        }
    };
}]);

Select(和大多数其他输入)带有data-ng-change，它将在任何更改时触发。因此，你可以这样做，而不是自己编写on 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/

相关文章：