AngularJS submit on blur and blur on keypress

Question

Я хочу отправить некоторые данные на сервер, когда поле ввода размыто. Пользователь также должен иметь возможность размыть поле ввода, нажав enter.

К сожалению, это приводит к следующему: $rootScope:inprog: $apply already in progress error.

Plunkr - заблаговременно!

Answer 1

Вот что происходит:

• Нажимаешь введите
• нг-KeyDown триггерами (дайджест начинается)
• Вы называете target.blur()
• нг-смазанности спусковые и пытается начать новый цикл дайджеста
• Угловые жалобы

Размытие выполняется синхронно и сразу же запускает обработчик, не заканчивая первый дайджест.

На мой взгляд, это не проблема с вашим кодом, а скорее угловая ошибка. Я пытался придумать лучшего решения, но я могу только найти:

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

Вы можете оформить Угловое UI @http://angular-ui.github.io/ui-utils/

Обеспечить детали события, связанные обрабатывать размытости, фокуса, keydow, KeyUp, нажатие клавиши

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