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