点击似乎被模糊阻止

时间:2013-06-21 14:10:28

标签: javascript angularjs angularjs-directive

我有使用绑定到blur事件处理验证的指令,如此plunkr所示:

http://plnkr.co/edit/avEJ2xfLfz6ihM3DwLyB?p=preview(第一个字段的有效输入是电子邮件地址,第二个字段是'是')

验证有效,但为了触发allowValidation()函数,有时您必须单击两次“提交”按钮。

我把它缩小到了onblur和按钮之间的一些互动;大概如果你有一个onblur,即使在两个文本字段之一仍然等待模糊按钮只处理模糊而不是点击。

有没有办法让它处理点击而不是模糊呢?我也在点击中调用验证。

1 个答案:

答案 0 :(得分:0)

在我的试验中,我没有发现您的代码存在任何问题。但是,如果您确实遇到模糊和按钮单击似乎冲突的情况,则可以在触发有效性时设置一个变量,并在验证完成后重置。

基本上,在指令的链接功能中,有以下内容:

//Keeps track of the validation being active
var validationInProgress = false;

function dovalidation () {
    validationInProgress = true;
    //Validation code goes here
    if (EMAIL_REGX.test(elm.val())) {
        ctrl.$setValidity('emails', true);
    } else {
        ctrl.$setValidity('emails', false);
    }

    //Set this after validations are over
    //Should be the last statement in this function
    validationInProgress = false;
}

完成此操作后,每次调用dovalidation()时,在调用之前检查是否已有正在进行的验证 - 如果没有,则只调用。

elm.bind('blur', function () {
    if (!validationInProgress) {
        scope.$apply(dovalidation);
    }
});

scope.$on('kickOffValidations', function () {
    if (!validationInProgress) {
        dovalidation();
    }
});

使用上述更新编辑:Plunkr代码。