AngularJS invia su sfocatura e sfocatura su keypress

Question

Desidero inviare alcuni dati al server quando un campo di input è sfocato. L'utente dovrebbe anche essere in grado di sfocare il campo di input premendo enter.

Sfortunatamente questo risulta quanto segue: $rootScope:inprog: $apply already in progress error.

Plunkr - grazie in anticipo!

Answer 1

Ecco cosa sta succedendo:

• si preme Invio
• trigger NG-keydown (digerire inizia)
• Si chiama target.blur()
• trigger ng-blur e tenta di avviare un altro ciclo di digest
• reclami angolari

La sfocatura viene eseguita in modo sincrono e attiva immediatamente il gestore senza terminare il primo riassunto.

A mio parere, questo non è un problema con il codice, ma piuttosto un bug angolare. Ho cercato di pensare a una soluzione migliore, ma posso trovare soltanto:

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

è possibile verifica angolare UI @http://angular-ui.github.io/ui-utils/

forniamo i dettagli dell'evento gestire legati sfocatura, messa a fuoco, keydow, keyup, pressione di un tasto

<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

Ecco un piccolo direttiva:

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