Angularjs - trigger ng-click methods on keypress

Question

Using a 3rd party software that is a heavy user of angularjs, there are several a link icons with ng-click="..." methods that I would like to trigger using keypresses on the keyboard (either through angular or jquery).

Ideally, I would like to be able to navigate through the icons using right & left key arrows and press "enter" to trigger it, but if it's to much of a task, the alternative solution would be to trigger those methods directly using arrow keys on the keyboard.

Code example:

<a class="button one" ng-click="someMethod()" ng-if="!dial.source">
    <i class="location"></i>
</a>
<a class="button two" ng-click="otherMethod()" ng-if="!dial.source">
    <i class="location"></i>
</a>

Appreciate it alot if someone could help!

David Votrubec · Accepted Answer · 2015-06-30 09:54:05Z

1

You can use the Angular Hotkeys library: http://chieffancypants.github.io/angular-hotkeys/

Or alternatively the Keypress module from the Angular UI project: http://angular-ui.github.io/ui-utils/#/keypress

I have no experience using the Hotkeys library, so I provide example for the Keypress module.

Your icons are in some container <div> and you need to define an event listener on that div. Something like this:

<div  ui-keydown="{'ctrl-enter':'vm.someMethodShortcut($event)', 'ctrl-home':'vm.someOtherMethodShortcut($event)'}">
  ... your old HTML ...
</div>

Controller

    var that = this;
    this.someMethodShortcut = function (event: KeyboardEvent) {
        event.preventDefault();
        event.stopPropagation();

        //Call the original method
        var args = Array.prototype.slice.call(arguments, 1);
        var func = scope[functionName];
        return that.someMethodShort.apply(null, args.concat(Array.prototype.slice.call(arguments)));
    };

The $event represent the actual KeyboardEvent, which can then be captured or cancelled in your controller.

The documentation is indeed very short, I'm afraid you will have to read to source code to actually understand how it works. I believe that the Hotkeys has better API, and it does not work as a directive, so you do not need to mess with html. But sorry I can't give you working example, I did not use it (yet)

edited Jun 30, 2015 at 9:54

answered Jun 30, 2015 at 8:43

David Votrubec

4,1843 gold badges35 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Angelo Over a year ago

Thanks for the quick reply! I'm having a hard time understanding the limited documentation. Could you please give code examples on how to make the example code above work? Thanks!

David Votrubec Over a year ago

The file with directive is named keypress.js

Angelo Over a year ago

Hi again and thanks for the quick reply! What if the method is already defined (as you can see in my code example), in this case someMethod(). All I want it is for it to be "called" when pressing a key, isn't there a easier solution for this? Thanks for your help..

David Votrubec Over a year ago

@Angelo that is no problem :) The only purpose of having 2 methods (like someMethod and someMethodShortcut is to handle the event propagation.

Angelo Over a year ago

Thanks but I'm having a hard time understanding your reply. I can't seem to get it to work using your example. Could you try to be more specific using my example code instead? Also, please note that I don't want to specify any method for the key press, I want to call the same method that's in "ng-click".

Collectives™ on Stack Overflow

Angularjs - trigger ng-click methods on keypress

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related