如何在使用路由的 AngularJS 1.5 应用中实现特定于页面的键盘快捷键？
这就是我想要实现的目标:
index.html:
<!doctype html>
<html data-ng-app="myApp">
<body data-ng-keydown="onKeyDown($event)">
...
<div data-ng-view></div>
...
</body>
</html>
据我了解，如果您的范围内没有聚焦的元素(例如输入字段，我)，您需要处理 标记上的按键事件没有那些)。
app.js:
var myApp = angular.module('myApp', ['ngRoute', 'myControllers']);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeCtrl'
})
.when('/create', {
templateUrl: 'pages/create.html',
controller: 'CreateCtrl'
});
}]);
controllers.js:
var myControllers = angular.module('myControllers', []);
myControllers.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.closeLandingPagePopUp = function () {
...
};
$scope.onKeyDown = function ($event) {
switch ($event.keyCode) {
case 27: // [Esc]
$scope.closeLandingPagePopUp();
break;
...
}
};
}]);
myControllers.controller('CreateCtrl', ['$scope', function ($scope) {
$scope.cancelCreation = function () {
...
};
$scope.onKeyDown = function ($event) {
switch ($event.keyCode) {
case 27: // [Esc]
$scope.cancelCreation();
break;
...
}
};
}]);
因此在两个页面上 [Esc] 键应该以不同的方式处理。
当然，HTML 属性 data-ng-keydown="onKeyDown($event)" 不起作用，因为它超出了 Controller 的范围。
有没有办法做到这一点，同时仍然将所有页面特定代码保留在各自的 Controller 中？
最佳答案
georgeawg's answer很鼓舞人心，但我最终得到了这个实现:
myControllers.controller('HomeCtrl', ['$scope', '$document', function ($scope, $document) {
var handleKeyDown = function(event) {
switch (event.keyCode) {
case 27: // [Esc]
$scope.closeLandingPagePopUp();
break;
...
}
$scope.$apply();
};
$document.on('keydown', handleKeyDown);
$scope.$on('$destroy', function() {
$document.unbind('keydown', handleKeyDown);
});
}]);
HTML 部分实际上没有什么可做的。
说明:
- 每个 Controller 都有一个
handleKeyDown(event)函数来实现快捷键 $document.on('keydown', handleKeyDown)在 Controller 初始化时将处理函数绑定(bind)到全局 keydown 事件。 $document是 Angular 的 jQuery 包装器。- 当 Controller 被销毁时解除绑定(bind)处理程序
- 使用
$scope.$apply()让 Angular 知道数据何时发生变化并且需要刷新 View
关于javascript - AngularJS:如何处理路由 Controller 中的键盘快捷键？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36266285/