AngularJS submit on blur und blur auf Tastendruck

Question

Ich möchte einige Daten an den Server übermitteln, wenn ein Eingabefeld unscharf ist. Der Benutzer sollte auch in der Lage sein, das Eingabefeld durch Drücken der Eingabetaste zu verwischen.

Leider ergibt dies Folgendes: $rootScope:inprog: $apply already in progress error.

Plunkr - Vielen Dank im Voraus!

Answer 1

Hier ist, was passiert:

• Sie die Eingabetaste drücken
• ng-keydown Trigger (zu verdauen beginnt)
• Sie rufen target.blur()
• ng-Blur-Trigger und versucht, einen anderen Digest-Zyklus
zu starten
• Angular klagt

Die Unschärfe wird synchron ausgeführt und löst sofort den Handler aus, ohne den ersten Digest zu beenden.

Meiner Meinung nach ist dies kein Problem mit Ihrem Code, sondern eher ein Angular Bug. Ich habe versucht, eine bessere Lösung zu denken, aber ich kann nur finden:

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

Sie Angular UI Prüfung können @http://angular-ui.github.io/ui-utils/

Details Geben ereignisbezogene Unschärfe behandeln, Fokus, 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> 

Answer 3

Hier ist eine kleine Richtlinie:

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