如何检测AngularJS中的onKeyUp？
我正在寻找一个'ngOnkeyup'指令,类似于ngChange,但我找不到合适的东西.
如果没有这样的指令,是否有一种干净的方式从浏览器本机的onkeyup事件调用控制器？
mak*_*enz 77
对于今天寻找该功能的每个人,请使用官方ng-keyup指令:
<input type="text" ng-keyup="{expression}" />
And*_*lin 69
编辑:请参阅下面的maklemenz的第二个答案,它指的是新的内置ng-keyup指令
你可以使用angular-ui库:
使用angular-ui,你可以做到
<input ui-event="{keyup: 'myFn($event)'}"
如果您不想使用其他库,最有效和最简单的方法是:
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">
编辑:如果您想要检测按下了哪个键,您确实有两个基本选项.您可以向指令添加属性以处理指令中允许的键,或者您可以将按键传递给控制器.我通常会建议指令处理密钥方法.
以下是两种方式的示例:http://jsfiddle.net/bYUa3/2
如果默认指令不够,则必须创建自定义指令.这样的事情可能会是什么？
<!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>
除了已经提到的Event Binder之外,您现在可以使用Angular UI中的这些方便的ui-key*指令:
<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>
http://angular-ui.github.io/#/directives-keypress
只是为了帮助那些像我一样只想在某个键上发射事件的人.这是使用的代码,只有在按下escape时才ng-keyup调用我的cancel()函数.要了解您想要的密钥代码,请访问此网站
ng-keyup="$event.keyCode == 27 ? cancel() : ''"
请注意,正如@maklemenz所提到的,它现在使用内置的Angular指令