为什么添加其他AngularJS验证指令会导致$ asyncValidators多次运行? [英] Why does adding additional AngularJS validation directives cause $asyncValidators to run multiple times?

问题描述

为什么添加其他AngularJS验证指令会导致$asyncValidators在页面加载时多次运行?

Why does adding additional AngularJS validation directives cause $asyncValidators to run multiple times on page load?

我创建了一个自定义指令，该指令实现了$ asyncValidators.这是该自定义指令的基本结构:

I created a custom directive which implements $asyncValidators. This is the basic structure of that custom directive:

myApp.directive('userSaved',['$q','userLookup',function($q, userLookup){
return {
  restrict: 'A',
  require: 'ngModel',
  link: function(scope, elem, attrs, ctrl){
    ctrl.$asyncValidators.userSaved = function(modelValue, viewValue) {
      // do stuff 
    }
  }
}
}]);

控制器像这样初始化tailNumber模型值:

The controller initializes the tailNumber model value like this:

$scope.tailNumber = 'N33221';

这是user-saved指令在页面加载时 3次运行的html:

This is the html where the user-saved directive runs 3 times on page load:

<input ng-model="tailNumber" name="tailNumber"   user-saved 
    ng-minlength="2"   ng-pattern="/^[A-z][a-zA-Z0-9]*$/" >

当我删除ng-minlength="2"时，user-saved指令在页面加载时运行两次( 2次).这是已删除ng-minlength="2"的html:

When I remove ng-minlength="2" then the user-saved directive runs twice on page load (2 times). This is the html with ng-minlength="2" removed:

<input ng-model="tailNumber" name="tailNumber"   user-saved 
    ng-pattern="/^[A-z][a-zA-Z0-9]*$/" >

当我删除ng-pattern="/^[A-z][a-zA-Z0-9]*$/"时，user-saved指令仅运行 1次.这是删除ng-pattern="/^[A-z][a-zA-Z0-9]*$/"

When I remove ng-pattern="/^[A-z][a-zA-Z0-9]*$/" then the user-saved directive only runs 1 time. This is the html after removing ng-pattern="/^[A-z][a-zA-Z0-9]*$/"

<input ng-model="tailNumber" name="tailNumber" user-saved >

为什么我向$asyncValidators注册的函数为附加到表单元素的每个其他ng验证器运行了额外的时间?

Why does my function registered with $asyncValidators run an additional time for each additional ng validator attached to the form element?

我的自定义指令是一个昂贵的$http调用，我更喜欢我的自定义指令仅在页面加载时运行一次.是否可以使用所有这些ng验证程序，而只在一次运行我的异步验证程序功能而不是页面加载时运行3次?

My custom directive is an expensive $http call, and I prefer my custom directive only run once on page load. Is it possible to use all of these ng validators and while only running my async validator function one time instead of 3 times on page load?

推荐答案

这是因为诸如ngMaxlength，ngPattern之类的验证指令通过调用ngModelController.$validate()来调用初始验证周期.

This is because validation directives like ngMaxlength, ngPattern invoke an initial validation cycle with a call to ngModelController.$validate().

这将导致所有验证指令(包括异步验证器)运行其验证逻辑.

This causes all the validation directive to run their validation logic, including the async validators.

防止冗余$http调用的一种方法(实际上还是一个好习惯)是为每个输入缓存验证结果.

One way to prevent the redundant $http calls, and in fact it is a good practice anyway, is to cache the validation result for each input.

这篇关于为什么添加其他AngularJS验证指令会导致$ asyncValidators多次运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！