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

Question

I had to write a custom directive because I need access to user input while composing Korean characters. As explained in another post , I can't use keydown or keypress because they don't get triggered at the right time when composing Korean characters. element.bind('input') does the trick but now I face another problem.

How can I access the event inside the element.bind callback to exit/return if the enter key has been hit?

HTML

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

Directive

.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

Please note that;

input: don't have which property and triggered after keypress. Namely you can bind unbind input event inside keypress event. Also input event don't triggered on Enter. Namely e.which==13 not requred to validate.

keypress event not triggered when backspace, if you don't need check value when backspace, there is no problem.

keydown and keyup events triggered for each key you can use them with eachother You can try something like this.

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

   }
 };
})