输入字段 (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

您可以使用 ngModelOptions in Angular 1.3：

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

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

Answer 2

我强烈建议你查看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它才会执行。这非常适合自动完成样式框，这似乎与您正在处理的内容相似。它也非常适合窗口大小调整、动画导航和自定义降价编辑器。