Luk*_*ger 38 hotkeys angularjs
我是AngularJS的新手,但到目前为止我发现它非常符合我的喜好.对于我目前的项目,我需要热键功能,很高兴看到自1.1.2版本以来它受支持.
ng-keydown指令(http://code.angularjs.org/1.1.3/docs/api/ng.directive:ngKeydown)按输入类型的预期工作,但是对于任何其他上下文(如div等)都不能使用鉴于文件说不然.
这是一个最小的例子(http://jsfiddle.net/TdXWW/12/),分别是不工作的:
<input ng-keydown="keypress($event)">
<div ng-keydown="keypress($event)">
Run Code Online (Sandbox Code Playgroud)
注意:我知道这可以用简单的jQuery(http://www.mkyong.com/jquery/how-to-check-if-an-enter-key-is-pressed-with-jquery/)来处理,但我很多更愿意了解如何在AngularJS中处理它.
Joã*_*nho 84
我遇到了同样的问题,并且能够通过遵循此评论中提供的这个简单提示来修复它:https://stackoverflow.com/a/1718035/80264
你需要给div一个tabindex,以便它可以获得焦点.
<div id="testdiv" tabindex="0"></div>
Run Code Online (Sandbox Code Playgroud)
谢谢!为了解决这个问题,我得到了这个,将$ document注入我的指令,然后:
MyApp.directive('myDirective', function($document) {
return {
...
$document.keydown(function(e){
console.log(e)
})
}
Run Code Online (Sandbox Code Playgroud)
这就是我最终实现它的方式.
添加ng-app
到html
元素,ng-keyup
并ng-keydown
在body
元素:
<html ng-app="myApp" ng-controller="MainCtrl">
.....
<body ng-keydown="keyPress($event);" ng-keyup="keyRelease($event);">
Run Code Online (Sandbox Code Playgroud)
然后我的控制器中的函数处理事件调用event.which获取密钥代码(在我的实现中我将var设置为rootScope但你也可以广播到其他控制器)
$scope.keyPress = function(eve) {
if (eve.which === 16) { // shift
// $rootScope.$broadcast('doShift');
$rootScope.shiftOn = true;
};
};
Run Code Online (Sandbox Code Playgroud)