AngularJS提交模糊和按键模糊

Question

我想在输入字段模糊时向服务器提交一些数据。用户还应该能够通过按下回车键来模糊输入字段。

不幸的是，这会导致以下错误：$rootScope:inprog:$apply已在进行中。

Plunkr-提前感谢！

Answer 1

下面是发生的事情：

• 你按下回车键
• ng keydown触发器（摘要开始）
• 您呼叫target.blur()
• ng模糊触发并尝试启动另一个摘要循环
• Angular抱怨

模糊是同步执行的，并且在不完成第一个摘要的情况下立即触发处理程序。

在我看来，这不是代码的问题，而是一个Angular错误。我一直在想一个更好的解决方案，但我只能找到：

app.controller('BlurCtrl', function($scope, $timeout) {
  $scope.blurModel = "I'm the value"
    $scope.blurOnEnter = function( $event ) {
      if ( $event.keyCode != 13 )
        return
      // this will finish the current digest before triggering the blur
      $timeout(function () { $event.target.blur() }, 0, false);
    }
    $scope.onBlur = function() {
    $scope.result = this.blurModel
    }
})

Answer 2

您可以签出Angular UI@http://angular-ui.github.io/ui-utils/

提供与模糊、焦点、按键向下、按键向上、按键相关的事件处理细节

<input ui-event="{ blur : 'blurCallback()' }">
<textarea ui-keypress="{13:'keypressCallback($event)'}"></textarea>
<textarea ui-keydown="{'enter alt-space':'keypressCallback($event)'}"> </textarea>
<textarea ui-keydown="{27:'keydownCallback($event)'}"></textarea>
<textarea ui-keydown="{'enter alt-space':'keypressCallback($event)'}"> </textarea>
<textarea ui-keyup="{'enter':'keypressCallback($event)'}"> </textarea>

Answer 3

这里有一个小指令：

    .directive('ngEnterBlur', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress blur", function (event) {
            if(event.which === 13 || event.type === "blur") {
                scope.$apply(function (){
                    scope.$eval(attrs.ngEnterBlur);
                });
                event.preventDefault();
            }
        });
    };
})