AngularJS提交模糊和按鍵模糊

Question

我想在輸入字段模糊時向服務器提交一些數據。用戶還應該能夠通過按回車來模糊輸入字段。

很抱歉，這會發生以下結果：$rootScope:inprog: $apply already in progress error。

Plunkr - 在此先感謝！

Answer 1

這裏發生的事情：

• 按ENTER鍵
• NG-的keydown觸發（消化開始）
• 你叫target.blur()
• NG-模糊觸發器和嘗試啓動另一個消化週期
• 角度投訴

模糊被同步執行，並立即觸發處理程序而不完成第一個摘要。

在我看來，這不是你的代碼問題，而是一個角度錯誤。我一直在試圖想出一個更好的解決辦法，但我只能找到：

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