javascript - 模糊angularJS上的异步验证指令

Question

我正在尝试创建一个指令来验证用户通过异步网络请求提供的邮件。它工作正常，但问题是每次用户键入一个字符时都会进行异步调用，我希望异步调用仅在模糊时进行，我该怎么做？

指令代码如下:

angular.module('myModule').directive('usernameValidator', function($http, $q) {
return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
        ngModel.$asyncValidators.username = function(modelValue, viewValue) {
            return $http.post('/username-check', {username: viewValue}).then(
                function(response) {
                    if (!response.data.validUsername) {
                        return $q.reject(response.data.errorMessage);
                    }
                    return true;
                }
            );
        };
    }
};
});

我试过把所有东西都放在一个 block 中

element.bind('blur', function() { ... })

但是当代码在 element.bind block 中时，我有一个完全奇怪的行为:第一次我关注输入，没有异步调用，当我模糊没有异步调用，当我回来关注我有异步的输入调用每个字符..

Answer 1

尝试在 HTML ng-model-options="{ updateOn: 'blur' }" 中添加您的指令，如 https://docs.angularjs.org/api/ng/directive/ngModelOptions# 所示。 !, 所以你的指令看起来像:

<input ng-model="your_model"
       username-validator
       ng-model-options="{ updateOn: 'blur' }">