javascript - Angular JS - 使用 Angular JS 指令时多个 ajax 调用会在模糊时触发

Question

我正在尝试验证我的电子邮件地址的唯一性。

使用传统方法时，每按一次键，就会调用 $http 服务，并因此触发大量数据库调用。我想让它成为一个模糊事件。

我编写了一个脚本，它工作正常，但是当我测试它的模糊事件时，它仍然多次触发 $http 服务。数倍；假设 ajax 调用已经第一次触发，在下一次 go 中，firebug 将捕获 2 个调用，并且在下一次 go 中再次发生这种情况，总共进行 3 次额外调用。这使得每 3 次调用 6 次。

elem.unbind('input').unbind('keydown').unbind('change');
   elem.on('blur', function(){                  
       bindData();
       scope.$apply(function () {
         ctrl.$setViewValue(elem.val());
       });
   });

代码的骗子在这里。

http://plnkr.co/edit/kR9v91nV2uTkuTtwgX6p?p=preview

Answer 1

示例中的这部分代码

elem.unbind('input').unbind('keydown').unbind('change');
            elem.on('blur', function(){
              // on blur ajax call will fire
                bindData();
                scope.$apply(function () {
                          ctrl.$setViewValue(elem.val());
                    });
            });

似乎表明您正在以 jQuery 方式编写 AngularJS 代码。这不是它的设计用途，请看看这篇精彩的文章 - "Thinking in AngularJS" if I have a jQuery background? .

对于您的案例主要要求 - 通过消除模型更改来减少服务器调用量 - 有一个特定的 AngularJS 模型属性 ngModelOptions 。利用这个你的<input>标签代码将如下所示:

<input ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } } /*other attributes*/ />