0

在我们的 AngularJS 1.* 应用程序的一个页面上，我正在查看一个文本输入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在更改值后立即点击时，由于去抖动设置，新值尚未在模型中。

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

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

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

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

4

2 回答 2

0

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

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

于 2018-02-08T20:46:13.670 回答
0

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

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()">
于 2020-05-06T08:06:49.127 回答