ejemplos - angularjs vs angular
¿Cómo puedo detectar onKeyUp en AngularJS? (8)
Además de la Carpeta de eventos ya mencionada, ahora puede usar estas prácticas directivas ui-key * de la interfaz de usuario angular:
<textarea
ui-keypress="{13:''keypressCallback($event)''}">
</textarea>
<textarea
ui-keydown="{''enter alt-space'':''keypressCallback($event)''}">
</textarea>
<textarea
ui-keyup="{''enter'':''keypressCallback($event)''}">
</textarea>
<script>
$scope.keypressCallback = function($event) {
alert(''Voila!'');
$event.preventDefault();
};
</script>
¿Cómo puedo detectar onKeyUp en AngularJS?
Estoy buscando una directiva ''ngOnkeyup'', similar a ngChange, pero no encuentro nada adecuado.
Si no existe una directiva de este tipo, ¿existe una forma clara de llamar al controlador desde un evento onkeyup nativo del navegador?
FYI - Acabo de buscar esto hoy y parece que hay una rama en el github de Angular que aborda el problema de keyup keydown.
https://github.com/angular/angular.js/pull/1622
Se ha fusionado en master ... SIN EMBARGO, no parece que aparezca en una versión hasta el 1.1.3
Para construir el angular con la opción ng-keyup en su lugar, puede descargar el código de git y ejecutar el rake package en la carpeta. Por supuesto, en Windows eso significa instalar Node.js y Ruby y posiblemente algunos otros aros (estaba teniendo errores de bifurcación en win32)
Sin embargo, conseguí la clave "incorporada" al final.
Para todos aquellos que buscan esa característica hoy, use la directiva oficial ng-keyup :
<input type="text" ng-keyup="{expression}" />
Sé que mi respuesta es demasiado tarde, pero espero que pueda ser útil para algunas personas. Si está buscando un método rápido y fácil, puede utilizar esto:
// in the controller
// get element by id, you can use by class...
var element = angular.element(''#element'');
element.keyup(function () {
console.log(''keyup fired'');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<input id="element" type="text" />
Si entiendo correctamente su pregunta, está buscando la directiva ng-keyup. Aquí hay un enlace: ng-keyup
Solo para ayudar a cualquiera que, como yo, quisiera disparar el evento solo con cierta clave. Aquí está el código que usa ng-keyup que llama a mi función cancel() cuando, y solo cuando, se presiona escape. Para averiguar qué código clave desea ver en este sitio web
ng-keyup="$event.keyCode == 27 ? cancel() : ''''"
Tenga en cuenta que como @maklemenz mencionó esto, utiliza la directiva angular incorporada disponible ahora
Tendrá que crear su directiva personalizada si las directivas predeterminadas no son suficientes. Algo como esto, puede ser?
<!doctype html>
<html lang="en" ng-app="app">
<body ng-controller="ctrl">
<input ng-onkeyup="keyup()"/>
<script src="js/lib/angular-1.0.0.min.js"></script>
<script>
angular.module(''app'', []).directive(''ngOnkeyup'', function() {
return {
restrict: ''A'',
scope: {
func: ''&ngOnkeyup''
},
link: function( scope, elem, attrs ) {
elem.bind(''keyup'', scope.func);
}
};
});
function ctrl($scope) {
$scope.keyup = function() {
alert(''keyup fired'');
};
}
</script>
</body>
</html>
EDITAR: vea la segunda respuesta a continuación de maklemenz que se refiere a la nueva directiva integrada ng-keyup
Podrías usar la librería angular-ui :
Con angular-ui, solo puedes hacer
<input ui-event="{keyup: ''myFn($event)''}"
Si no desea utilizar otra biblioteca, la forma más eficiente y sencilla de hacerlo es:
JS
myApp.directive(''onKeyup'', function() {
return function(scope, elm, attrs) {
elm.bind("keyup", function() {
scope.$apply(attrs.onKeyup);
});
};
});
HTML:
<input on-keyup="count = count + 1">
Editar : si desea detectar qué tecla se presionó, tiene dos opciones básicas. Puede agregar un atributo a la directiva para manejar las claves permitidas dentro de la directiva, o puede pasar la clave presionada a su controlador. Generalmente recomendaría que la directiva maneje el método clave.
Aquí hay un ejemplo de ambas formas: http://jsfiddle.net/bYUa3/2