Una directiva angularesca para el teclado

Para controlar el teclado en angular

Paul Wunderlich

archivado en: JavaScript / 7 mayo, 2015 / taller:

En el curro estamos preparando una aplicación angularesca con retos muy divertidos y uno de ellos es que toda la interfaz del usuario debe funcionar mediante el teclado, sin el ratón para aclararnos. Al menos para mí, que el ratón es un apéndice de la mano, está suponiendo una dificultad interesante. Aunque hay módulos en angular que sirven para definir comportamientos asociados a las teclas, creo que es más sencillo si se arma una directiva similar a esta. No la explico que es tarde y estoy cansado, pero creo que este snippet no necesita glosa alguna. Pongo junta a la directiva con el controlador para que se entienda mejor...

En la vista:

<div ng-controller="cMain">

<hot-keys config="configHotKeys"></hot-keys>

</div>

La directiva

angular.module('lab', [])

.controller("cMain", function($scope) {

$scope.configHotKeys = {

"foo":"bar"

};

$scope.bazinga = function() {

console.log('Bazinga!');

}

})

.directive('hotKeys', function() {

return {

restrict: 'E',

scope: {

config: '='

},

link: function (scope, element, attrs) {

function keysAction(event) {

switch(event.keyIdentifier) {

case "Enter":

if ( scope.config.foo !== "bar" ) {

scope.$parent.bazinga();

} else {

//

}

break;

case "U+0009": // tabulación

//

break;

default:

//

}

}

document.addEventListener('keydown', keysAction, false);

}

}

});

|| Tags: ,

Este artículo aún no ha sido valorado.

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.