¿Cómo usar un evento de pulsación de tecla en AngularJS?

Quiero ver el evento de presionar la tecla Intro en el cuadro de texto a continuación. Para que quede más claro, estoy usando una ng-repeat para poblar el tbody. Aquí está el HTML:

  

Este es mi módulo:

 angular.module('components', ['ngResource']); 

Estoy usando un recurso para completar la tabla y mi código de controlador es:

 function Ajaxy($scope, $resource) { //controller which has resource to populate the table } 

Necesita agregar una directive , como esta:

Javascript :

 app.directive('myEnter', function () { return function (scope, element, attrs) { element.bind("keydown keypress", function (event) { if(event.which === 13) { scope.$apply(function (){ scope.$eval(attrs.myEnter); }); event.preventDefault(); } }); }; }); 

HTML :

 

Una alternativa es usar la directiva estándar ng-keypress="myFunct($event)"

Luego en su controlador puede tener:

 ... $scope.myFunct = function(keyEvent) { if (keyEvent.which === 13) alert('I am an alert'); } ... 

Mi enfoque más simple usando la directiva de construcción angular:

ng-keypress , ng-keydown o ng-keyup .

Por lo general, queremos agregar soporte de teclado para algo que ya se maneja con ng-click.

por ejemplo:

 action 

Ahora, agreguemos soporte para teclado.

disparar con la tecla Intro:

 action 

por la tecla espacio:

 action 

por espacio o tecla enter:

 action 

si estás en un navegador moderno

 action 

Más sobre keyCode:
keyCode está en desuso pero con una API bien soportada; en su lugar, podría usar $ evevt.key en un navegador compatible.
Ver más en https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Otra alternativa simple:

  

Y la alternativa ng-ui:

  

Esto es lo que descubrí cuando estaba construyendo una aplicación con un requisito similar, no requiere escribir una directiva y es relativamente simple decir lo que hace:

  

Puede usar ng-keydown = “myFunction ($ event)” como atributo.

  myFunction(event) { if(event.keyCode == 13) { // '13' is the key code for enter // do what you want to do when 'enter' is pressed :) } } 

html

  

controller.js

 $scope.keyPressed = function (keyEvent) { if (keyEvent.keyCode == 13) { alert('presiono enter'); console.log('presiono enter'); } }; 

Molesto

 ng-keypress="console.log($event)" ng-keypress="alert(123)" 

no hizo nada por mí.

Strangley, la muestra en https://docs.angularjs.org/api/ng/directive/ngKeypress , que hace ng-keypress = “count = count + 1”, funciona.

Encontré una solución alternativa, que tiene presionando Enter, invoca el botón ng-click.

   

También puede aplicarlo a un controlador en un elemento principal. Este ejemplo se puede usar para resaltar una fila en una tabla presionando las teclas de flecha arriba / abajo.

 app.controller('tableCtrl', [ '$scope', '$element', function($scope, $element) { $scope.index = 0; // row index $scope.data = []; // array of items $scope.keypress = function(offset) { console.log('keypress', offset); var i = $scope.index + offset; if (i < 0) { i = $scope.data.length - 1; } if (i >= $scope.data.length) { i = 0; } }; $element.bind("keydown keypress", function (event) { console.log('keypress', event, event.which); if(event.which === 38) { // up $scope.keypress(-1); } else if (event.which === 40) { // down $scope.keypress(1); } else { return; } event.preventDefault(); }); }]); 
{{key}}
{{value}}

Esta es una extensión de la respuesta de EpokK.

Tuve el mismo problema de tener que llamar a una función de scope cuando se presiona enter en un campo de entrada. Sin embargo, también quería pasar el valor del campo de entrada a la función especificada. Esta es mi solución:

 app.directive('ltaEnter', function () { return function (scope, element, attrs) { element.bind("keydown keypress", function (event) { if(event.which === 13) { // Create closure with proper command var fn = function(command) { var cmd = command; return function() { scope.$eval(cmd); }; }(attrs.ltaEnter.replace('()', '("'+ event.target.value +'")' )); // Apply function scope.$apply(fn); event.preventDefault(); } }); }; 

});

El uso en HTML es el siguiente:

  

Felicitaciones a EpokK por su respuesta.

¿Qué tal esto ?:

 

Ahora, cuando presione la tecla Intro después de escribir algo en su entrada, el formulario sabe cómo manejarlo.

     
Informe your name:

{{resposta}}

Algunos ejemplos de código que hice para mi proyecto. Básicamente, agregas tags a tu entidad. Imagine que tiene texto de entrada, al ingresar el menú desplegable Nombre de la etiqueta obtienes tags precargadas para elegir, navegas con flechas y seleccionas con Intro:

HTML + AngularJS v1.2.0-rc.3

   

Controller.js

 $scope.preloadTags = function () { var newTag = $scope.newTag; if (newTag && newTag.trim()) { newTag = newTag.trim().toLowerCase(); $http( { method: 'GET', url: 'api/tag/gettags', dataType: 'json', contentType: 'application/json', mimeType: 'application/json', params: {'term': newTag} } ) .success(function (result) { $scope.preloadedTags = result; $scope.preloadedTagsIndex = -1; } ) .error(function (data, status, headers, config) { } ); } else { $scope.preloadedTags = {}; $scope.preloadedTagsIndex = -1; } }; function checkIndex(index) { if (index > $scope.preloadedTags.length - 1) { return 0; } if (index < 0) { return $scope.preloadedTags.length - 1; } return index; } function removeAllActiveTags() { for (var x = 0; x < $scope.preloadedTags.length; x++) { if ($scope.preloadedTags[x].activeTag) { $scope.preloadedTags[x].activeTag = false; } } } $scope.navigateTags = function ($event) { if (!$scope.newTag || $scope.preloadedTags.length == 0) { return; } if ($event.keyCode == 40) { // down removeAllActiveTags(); $scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex + 1); $scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true; } else if ($event.keyCode == 38) { // up removeAllActiveTags(); $scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex - 1); $scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true; } else if ($event.keyCode == 13) { // enter removeAllActiveTags(); $scope.selectTag($scope.preloadedTags[$scope.preloadedTagsIndex]); } }; $scope.selectTag = function (preloadedTag) { $scope.addTag(preloadedTag.label); }; 

CSS + Bootstrap v2.3.2

 .preloadedTagPanel { background-color: #FFFFFF; display: block; min-width: 250px; max-width: 700px; border: 1px solid #666666; padding-top: 0; border-radius: 0; } .preloadedTagItemPanel { background-color: #FFFFFF; border-bottom: 1px solid #666666; cursor: pointer; } .preloadedTagItemPanel:hover { background-color: #666666; } .preloadedTagItemPanelActive { background-color: #666666; } .preloadedTagItem { display: inline-block; text-decoration: none; margin-left: 5px; margin-right: 5px; padding-top: 5px; padding-bottom: 5px; padding-left: 20px; padding-right: 10px; color: #666666 !important; font-size: 11px; } .preloadedTagItem:hover { background-color: #666666; } .preloadedTagItemActive { background-color: #666666; color: #FFFFFF !important; } .dropdown .preloadedTagItemPanel:last-child { border-bottom: 0; } 

Estoy un poco tarde … pero encontré una solución más simple usando auto-focus . Esto podría ser útil para botones u otros al abrir un dialog :

Eso debería estar bien si desea presionar el botón on Espacio o Ingresar clics.

esta es mi directriz:

 mainApp.directive('number', function () { return { link: function (scope, el, attr) { el.bind("keydown keypress", function (event) { //ignore all characters that are not numbers, except backspace, delete, left arrow and right arrow if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 8 && event.keyCode != 46 && event.keyCode != 37 && event.keyCode != 39) { event.preventDefault(); } }); } }; }); 

uso:

  

puede usar ng-keydown, ng-keyup, ng-press como este.

para desarrollar una función:

   

o si tiene una condición, como cuando presiona escape (27 es el código clave para escapar)

  
....

Creo que usar document.bind es un poco más elegante

 constructor($scope, $document) { var that = this; $document.bind("keydown", function(event) { $scope.$apply(function(){ that.handleKeyDown(event); }); }); } 

Para obtener el documento al constructor del controlador:

 controller: ['$scope', '$document', MyCtrl] 

¿Qué tal solo