Madhavan Kumar Madhavan Kumar - 10 months ago 54
AngularJS Question

Angularjs directive - keydown listener is invoked with delay

I have a directive

applied to an input element. It will convert all chars in the input box to uppercase as the user types it.

Now, the directive has its event listener attached to

link : function(scope, element, attrs){
element.bind('keydown', function(event){
element[0].value = element[0].value.toUpperCase();

Uppercasing works for all, except that the last character is left out. If user types
, it will render
. I am able to fix it by wrapping the code inside
block, but i am curious why doesn't the view get updated, when i set

Plunker code is here.

Answer Source

This is because keydown events are fired before the new character is added to the value of the input. Use keyup

element.bind('keyup', function(event){
    element[0].value = element[0].value.toUpperCase();