AngularJS submit on blur and blur on keypress

问题

I want to submit some data to the server when a input field is blurred. The User should also be able to blur the input field by pressing enter.

Unfortunately this results in the following: $rootScope:inprog: $apply already in progress error.

Plunkr - thanks in advance!

回答1:

Here's what's happening:

You press enter
ng-keydown triggers (digest begins)
You call target.blur()
ng-blur triggers and attempts to start another digest cycle
Angular complains

The blur is executed synchronously and immediately triggers the handler without finishing the first digest.

In my opinion, this is not a problem with your code, but rather an Angular bug. I've been trying to think of a better solution, but I can only find:

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
    }
})

回答2:

You can checkout Angular UI @ http://angular-ui.github.io/ui-utils/

Provide details event handle related blur,focus,keydow,keyup,keypress

<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>

回答3:

Here is a small directive :

    .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();
            }
        });
    };
})

来源：https://stackoverflow.com/questions/18389527/angularjs-submit-on-blur-and-blur-on-keypress

标签

angularjs

keypress

blur