输入字段（ng-modal）完成后的事件（$watch）

Question

我有一个要求输入姓名的文本输入字段：

<input type="text" ng-modal="form.name" placeholder="Enter NAME">

我有一个手表功能正在收听 form.name

scope.$watch('form.name', function(newValue, oldValue) {
    //TODO: foo()
});

每次出现字母时都会调用 foo，但我希望只能在输入字段完成时调用 foo（通过取消选择输入字段或其他触发器）。

foo() 是一个昂贵的调用，我只想在输入字段完成后才调用它。

注意：在此过程之后将有多个输入字段，因此我不希望每个按钮都有一个按钮或一次完成所有输入字段。

Answer 1

我强烈建议您查看 Lodash/UnderscoreJS 以获得此类帮助。

这些库提供了很棒的辅助方法来处理集合、对象和（对您来说最重要的）函数。

解决您问题的方法是_.debounce(func, [wait=0], [options])。

_.debounce 的基本要点是防止呼叫快速连续发生。如果该方法在一定时间内没有被调用，那么该方法就会真正执行。

示例：

foo = _.debounce(foo, 200); // foo will now only execute 
                            //  after it has not been called for 200ms.

scope.$watch('form.name', function(newValue, oldValue) {
    foo(); // Expensive call that updates something...
});

在这个例子中，我可以任意多次调用foo，但是直到我调用它200ms之后它才会执行。这非常适合自动完成样式的框，它看起来与您正在处理的内容相似。它也非常适合 window 调整大小、动画导航和自定义降价编辑器。

Answer 2

您可以使用 angular 1.3 中可用的 ngModelOptions：

<input type="text" ng-modal="form.name" placeholder="Enter NAME"          
 ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }">

现在只有在输入失去焦点或用户停止输入 500 毫秒后，您的模型才会更新。

输入字段（ng-modal）完成后的事件（$watch）

Event ($watch) after input field (ng-modal) has been completed

javascript

jquery

html

angularjs

watch