【问题标题】:How to cancel debounce in ng-model-options in AngularJS如何在 AngularJS 的 ng-model-options 中取消去抖动
【发布时间】:2015-12-02 00:22:06
【问题描述】:
<form name="editForm">
    Title<input ng-model="task.title" type="text" name=taskTitle ng-model-options="{ updateOn: 'default' ,debounce{'default':2000000} }">
    <a ng-click="UpdateTask(task.title)">SAVE</a>
    <a ng-click="editForm.$rollbackViewValue();">DISCARD</a>
</form>

由于去抖值很长,当我点击“DISCARD”时,ng-model 不会反映它的变化。

但是,我想要的是,当我单击“保存”时,我可以更改去抖动值或使其过期,以便立即反映更改。

我在 AngularJs 文档中找不到 cancelDebounce(),有人愿意提供解决方案吗?谢谢

【问题讨论】:

  • 将其设为变量,而不是 2000000? ...实际上,您不需要去抖动或 ng-model 而是需要 ng-change 事件。

标签: angularjs validation angularjs-ng-model debouncing angularjs-forms


【解决方案1】:

我建议你有一个作用域变量,它的值将像$scope.myDebounce = 2000000 这样具有去抖值,然后在控制器内创建一个discard 函数,该函数首先将be-bounce 值重置为0,然后执行回滚表单更改。在下一个摘要循环中将myDebounce 变量重置为其实际值。

标记

<form name="editForm">
    Title
    <input ng-model="task.title" 
           type="text" 
           name=taskTitle 
           ng-model-options="{ updateOn: 'default', debounce: {'default': myDebounce } }">
    <a ng-click="UpdateTask(task.title)">SAVE</a>
    <a ng-click="editForm.$rollbackViewValue();">DISCARD</a>
</form>

代码

$scope.myDebounce = 2000000; //somewhere in controller

$scope.discard = function (form) {
   $scope.myDebounce = 0; //resetting debounce to get quick `ng-model` update
   form.$rollbackViewValue(); 
   $timeout(function(){
       //setting the actual debounce value to old one in next digest
       $scope.myDebounce = 2000000; 
   });
}

【讨论】:

  • Brilliant logic我得到一个错误:$timeout 没有定义。我需要在控制器中注册吗?
  • @Klyment 是的,你需要在你的控制器函数中 $timeout
  • 我正在尝试从范围变量传递值,但似乎 debounce 不接受它。我可以在 consol.log 中看到该值。这就是我正在尝试的方式; ng-model-options = "{ debounce: debounceValue }
  • @AbdulWaheed 你能提供一份问题陈述吗?
  • 这里是 plunker 链接。我想停止 ng-change。如果我直接传递值,这将起作用。不知何故 debounce 不喜欢从范围变量传递的值。 plnkr.co/edit/Thb0BCDhdyUw9tU09XFR
【解决方案2】:

我认为你真正需要的是 NgModelController.$commitViewValue();

来自angular doc

$commitViewValue() 提交对 $modelValue 的挂起更新。 更新可能因去抖动事件而处于挂起状态,或者因为输入正在等待 ng-model-options 中定义的某个未来事件。这个方法很少需要,因为 NgModelController 通常会处理调用这个来响应输入事件。

【讨论】:

    猜你喜欢
    • 2015-03-11
    • 1970-01-01
    • 2015-06-28
    • 2016-03-08
    • 2021-02-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多