AngularJS ngEnter - 函數被調用兩次

Question

我有這個輸入與ngEnter指令，如果我按下輸入比函數convertAdditionalHoursInHoliday被調用兩次 - 只有第一次。如果我再次按下輸入，則只會調用一次該函數。 有沒有人有任何想法爲什麼或我可以防止這種情況？

<input type="text" name="additionalHoursInHolidayAmount" 
    ng-model="institutionUserConnection.scheduleAbsenceHeader.additionalHoursInHoliday" 
    ng-Enter="vm.convertAdditionalHoursInHoliday(institutionUserConnection)" 
    ng-class="institutionUserConnection.scheduleAbsenceHeader.errorTimeAdditionalHoursInHoliday ? 'form-control input errorTime' : 'form-control input'" 
    placeholder="00:00" /> 

該指令是這樣的：

(function() { 
'use strict'; 

angular 
    .module('aposoft.userschedulemanagement') 
    .directive('ngEnter', function() { 
     return function (scope, element, attrs) { 
      element.bind("keydown keypress", function (event) { 
       if(event.which === 13) { 
        scope.$apply(function(){ 
         scope.$eval(attrs.ngEnter); 
        }); 

        event.preventDefault(); 
       } 
      }); 
     }; 
    }); 

}）（）;

Answer 1

我也有這個問題以及..不明白爲什麼在某些函數ng-enter按預期工作，並在其他函數調用兩次。

必須找到針對此問題的快速解決，所以我發現這個選項：

<input ng-keyup="$event.keyCode == 13 && tempFunc()"... /> 

在您的情況下，它看起來就像是：

<input type="text" name="additionalHoursInHolidayAmount" 
    ng-model="institutionUserConnection.scheduleAbsenceHeader.additionalHoursInHoliday" 
    ng-keyup="$event.keyCode == 13 && vm.convertAdditionalHoursInHoliday(institutionUserConnection)" 
    ng-class="institutionUserConnection.scheduleAbsenceHeader.errorTimeAdditionalHoursInHoliday ? 'form-control input errorTime' : 'form-control input'" 
    placeholder="00:00" /> 

在我的情況下，它的工作就像一個魅力..你應該檢查出來。

如果有關於爲什麼NG輸入指令任何見解被調用了兩次，我很樂意被作爲消息靈通..

希望這個解決方案能夠幫助現在:)

==== =================================================

我想我找到了一個更好的解決方案。

添加keydown和按鍵事件而不用逗號來分隔它們意味着兩者可能同時觸發。這可能會產生$ rootScope：inprog錯誤。在它們之間添加逗號會產生分離性，並確保僅發生$ digest循環。 （發現賴安·米勒在另一篇文章中這樣評論 - 感謝瑞安）

所以我們得到了工作指令是什麼（鼓聲）：

.directive('ngEnter', function() { 
    return function (scope, element, attrs) { 
    element.bind("keydown, keypress", function (event) { 
     if(event.which === 13) { 
     scope.$apply(function(){ 
      scope.$eval(attrs.ngEnter); 
     }); 
     event.preventDefault(); 
     } 
    }); 
    }; 
}); 

我已經檢查它在我的代碼，它的工作原理像一個魅力。

乾杯。