AngularJS：使用 element.bind('input') 在自定义指令中访问事件

Question

我不得不编写一个自定义指令，因为我需要在编写韩文字符时访问用户输入。如 another post 中所述，我无法使用 keydown 或 keypress，因为在编写韩语字符时它们不会在正确的时间触发。 element.bind('input') 可以解决问题，但现在我面临另一个问题。

如果按下回车键，我如何访问 element.bind 回调到 exit/return 中的事件？

HTML

<input cst-input="quizzesCtrl.checkAnswer(answer)" name="answer" id="answer" ng-model="quizzesCtrl.answer" type="text" />

指令

.directive('cstInput', function() {
  return {
    restrict: 'A',
    require: '^ngModel',    
    link: function (scope, element, attrs, ngModel) {
      element.bind('input', function(event) {                  
        if (event.which === 13) { return; } // can't access the event unless I bind to keypress etc
        scope.$apply(function(){            
          scope.ngModel = element.val();
          scope.$eval(attrs.cstInput, {'answer': scope.ngModel});
        });
      });
    }
  };
})

Answer 1

请注意；

input: 没有哪个属性并在按键后触发。也就是说，您可以在 keypress 事件中绑定 unbind input 事件。输入事件也不会在 Enter 上触发。即 e.which==13 不需要验证。

keypress退格时不触发事件，如果退格时不需要校验值，没有问题。

keydown 和 keyup 事件为每个键触发，您可以将它们与彼此一起使用你可以尝试这样的事情。

.directive('cstInput', function() {
  return {
   restrict: 'A',
   require: '^ngModel',    
   link: function (scope, element, attrs, ngModel) {
       element.on('keypress', function(event) {                  
              if (event.which === 13) { return; } // check key how you want
               //attach input event 
               element.on('input', function(evt) { 
                   scope.$apply(function(){            
                       scope.ngModel = element.val();
                       scope.$eval(attrs.cstInput, {'answer': scope.ngModel});
                   });
                   //deatach event again
                   element.off('input')
              });
       });

      //Alternatively using keydown with same way
      element.on('keydown', function(event) {                  
              if (event.which === 13) { return; } // check key how you want
               //attach input event 
               element.on('input', function(evt) { 
                   scope.$apply(function(){            
                       scope.ngModel = element.val();
                       scope.$eval(attrs.cstInput, {'answer': scope.ngModel});
                   });
                   //deatach event again
                   element.off('input')
              });
       });

   }
 };
})

AngularJS：使用 element.bind('input') 在自定义指令中访问事件

AngularJS: Access event inside custom directive using element.bind('input')

javascript

angularjs