event - ¿La directiva angularJS ng-keydown solo funciona para el contexto<input>?
ng enter angularjs (5)
¡El comentario de charlietfl aclaraba las cosas y vinculaba el evento a $ (documento) funcionó como se esperaba! Mensaje para llevar: la documentación de AngularJS no es exhaustiva, es decir, exige conocimiento previo.
Soy bastante nuevo en AngularJS pero lo encontré bastante de mi gusto hasta ahora. Para mi proyecto actual, necesito la funcionalidad de teclas de acceso rápido y me alegré de ver que es compatible desde la versión 1.1.2.
La directiva ng-keydown ( http://code.angularjs.org/1.1.3/docs/api/ng.directive:ngKeydown ) funciona como se espera para los tipos de entrada, pero me falla para cualquier otro contexto como div etc. que parece extraño dado que la documentación dice lo contrario.
Aquí hay un ejemplo mínimo ( http://jsfiddle.net/TdXWW/12/ ) del trabajo, respectivamente, el que no funciona:
<input ng-keydown="keypress($event)">
<div ng-keydown="keypress($event)">
NOTA: Sé que esto podría manejarse con jQuery simple ( http://www.mkyong.com/jquery/how-to-check-if-an-enter-key-is-pressed-with-jquery/ ) pero yo mucho Prefiero entender cómo manejarlo en AngularJS.
¡Gracias! Para concluir, lo hice trabajando, inyectando $ documento en mi directiva, luego:
MyApp.directive(''myDirective'', function($document) {
return {
...
$document.keydown(function(e){
console.log(e)
})
}
Esta fue la forma en que lo conseguí trabajando al final.
Agregue ng-keyup y ng-keydown al elemento body:
<html ng-app="myApp" ng-controller="MainCtrl">
.....
<body ng-keydown="keyPress($event);" ng-keyup="keyRelease($event);">
Entonces los funcitons en mi controlador se ocupan del evento de llamada al evento. Para obtener el código de la llave (en mi implementación establecí una var en el rootScope pero también se podía transmitir a otros controladores)
$scope.keyPress = function(eve){
if(eve.which === 16){//shift
//$rootScope.$broadcast(''doShift'');
$rootScope.shiftOn = true;
}
}
Estaba teniendo el mismo problema y pude solucionarlo siguiendo este sencillo consejo proporcionado en este comentario: https://.com/a/1718035/80264
Necesitas darle al div un tabindex para que pueda recibir el foco.
<div id="testdiv" tabindex="0"></div>
angular.module(''app'').directive(''executeOnEnter'', function () {
return {
restrict: ''A'',
link: function (scope, el, attrs, $rootScope) {
$(''body'').on(''keypress'', function (evt) {
if (evt.keyCode === 13) {
el.trigger(''click'', function () {
});
}
})
},
controller: function ($rootScope) {
function removeEvent() {
$("body").unbind("keypress");
}
$rootScope.$on(''$stateChangeStart'', removeEvent);
}
}
})