AngularJS przedstawia rozmazanie i rozmycie przy naciśnięciu klawisza

Question

Chcę przesłać niektóre dane do serwera, gdy pole wejściowe jest rozmyte. Użytkownik powinien również być w stanie zamazać pole wejściowe, naciskając klawisz enter.

Niestety powoduje to: $rootScope:inprog: $apply already in progress error.

Plunkr - z góry dzięki!

Answer 1

Oto co się dzieje:

• naciśnięciu klawisza ENTER
• NG-keyDown wyzwalaczy (strawić zaczyna)
• zadzwonić target.blur()
• ng rozmazaniu wyzwalacze i próbuje rozpocząć kolejny cykl digest
• Angular narzekania

Rozmycie jest wykonywane synchronicznie i natychmiast uruchamia procedurę obsługi bez ukończenia pierwszego skrótu.

Moim zdaniem nie jest to problem z kodem, ale raczej błędem Angular. Próbowałem wymyślić lepszego rozwiązania, ale mogę tylko znaleźć:

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

Można kasy kątowa UI @http://angular-ui.github.io/ui-utils/

Podaj szczegóły zdarzenia obsługiwać związane rozmycia, ostrość, keydow, keyup, przyciśnięcie

<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

Oto mały dyrektywy:

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