Question

在AngularJS 1. *应用程序的其中一个页面上，我正在查看文本输入¹，其debounce设置为大于零的值。它的配置大致如下：

<input type="text" data-ng-model="data.value1"
       ng-model-options="{ updateOn: 'default blur', debounce: { default: 2500, blur: 0 }}"
       data-ng-change="onValueChanged()">

单击按钮或按 Enter 键时，将处理通过该文本输入输入的数据。

现在，问题是当用户在更改值后立即点击 Enter 时，由于去抖动设置，新值尚未出现在模型中。

我找到talks about using ngSubmit instead of ngClick解决方案的唯一提示，但我们既没有使用表单元素也没有ngClick（后者至少不是重要的地方）。通过keydown事件在自定义指令中捕获 Enter 按键。

我可以以某种方式强制AngularJS跳过去抖期并立即在keydown事件的处理程序中更新我的命令模型吗？

请注意，一个明显的解决方法是使用$timeout略高于keydown处理程序中的去抖延迟，以确保模型已更新。但是，这对我来说真的很麻烦，并且与用户期望在点击 Enter 键时立即做出反应相冲突。

¹：实际上，它是一个动态生成的UI，可能在嵌套容器中包含任意数量的此类文本输入。

Answer 1

最后，我放弃了基于AngularJS的debounce选项。

相反，我在任何可以在输入模型更改时调用的地方使用_.debounce from the lodash library。 _.debounce提供flush()方法，如果合适，将强制立即调用去抖动函数。所以，我现在在对 Enter 键的击键做出反应时调用该方法。

Answer 2

我设法通过触发“提交”事件的自定义指令来解决该问题：

angular.module('...')
.directive('submitListener', () =>
    ({
        restrict: 'A',
        require: 'ngModel',
        link(scope, elem, attrs, ngModelCtrl) {
            elem.on('keyup', ($event) => {
                if ($event.keyCode === 13) {
                    console.log(`submitted !`)
                    ngModelCtrl.$setViewValue(elem.val(), 'submit')
                }
            })
        },
    })
)

并在输入端使用指令，并在ng-model-options + debounce config中配置事件：

<input type="text" data-ng-model="data.value1"
   ng-model-options="{ updateOn: 'default blur submit', debounce: { default: 2500, blur: 0, submit: 0 }}"
   submit-listener
   data-ng-change="onValueChanged()">

如何明确覆盖AngularJS模型的debouncing？

2 个答案: