Some moustrap directives for angularJS
This repo has two angular directives useful when you need to have easy keyboard access to basic app actions. It depends on mousetrapJS for the keyboard shortcuts
This module depends on mousetrap which is a library for making keyboard shortcuts (and works great!).
Please check the mousetrap documentation to see the posibilities of shortcuts combinations and more, i highly recommend it.
So far i've just done two directives:
The first directive is mousetrap which is a trigger of actions, based on keyboard shortcuts (as mousetrap works)
Another directive is mousetrap-focus which (as the name says) it will focus on a given field by pressing a keyboard shortcut.
You can use bower to install it:
bower install --save mousetrap-directives
Or you can download the zip on this repo and upload it to your server. Don't forget to include it in your html.
Just include the module:
mousetrap-directives
in your angular app as dependency and bingo! you can use the directives.
First, include it in your module:
angular.module('app', ['mousetrap-directives']);Now, to use the mousetrap directive, in the html just:
<span mousetrap="{'o': open}">Open</span>Or you can just use a string, to trigger the click event (i.e. ng-click):
<button ng-click="alert()" mousetrap="'c'">Click me</button>that would fire the alert function when the c key is press (by triggering the ng-click attribute)
Please notice that if the tag is disabled, the moustrap actions wont fire, this is useful if you have a form that want to submit with keyboard only, but want to prevent disabled buttons to trigger anyway.
You can focus on a field by using just the keyboard, like this:
<input type="text" ng-model="myModel" class="mousetrap" mousetrap-focus="'ctrl+b'" />When ctrl+b is pressed, the input will focus
Please notice that mousetrap disable the keyboard shortcuts on input fields by default, so, if you want to trigger the hotkey on an input you must add a mousetrap class.