angularjs - 为什么添加额外的 AngularJS 验证指令会导致 $async Validators 运行多次？

Question

为什么添加额外的 AngularJS 验证指令会导致 $asyncValidators 在页面加载时运行多次？

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

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 
    }
  }
}
}]);

Controller 初始化 tailNumber 模型值如下:

$scope.tailNumber = 'N33221';

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

<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:

<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]*$/"

后的 html

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

为什么我使用 $asyncValidators 注册的函数会为附加到表单元素的每个额外的 ng 验证器运行额外的时间？

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

Answer 1

这是因为 ngMaxlength、ngPattern 等验证指令通过调用 ngModelController.$validate() 来调用初始验证循环。

这会导致所有验证指令运行其验证逻辑，包括异步验证器。

防止冗余 $http 调用的一种方法是缓存每个输入的验证结果，实际上这是一种很好的做法。