AngularJS: 如何处理路由控制器中的键盘快捷键？

Question

如何在使用路由的 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>

据我了解，如果范围内没有焦点元素（例如输入字段，我没有），则需要处理 <body> 标签上的按键事件那些）。

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)" 不起作用，因为它在控制器的范围之外。

有没有办法做到这一点，同时仍然将所有页面特定代码保留在各自的控制器中？

Answer 1

全局按键指令

要获取指令之外的事件，请将事件处理程序绑定到 $document。

angular.module('myApp').directive("globalKeydown", 
  function($document) {
    return function linkFn(scope,elem,attrs) {
        var handlerUnbind = $document.on("keydown", function(e) {
            scope.$eval(attrs.globalKeydown, {$event: e});
            scope.$apply();
        });
        scope.$on('$destroy', function() {
             handlerUnbind();
        })
    }
});

此示例指令将 keydown 事件处理程序放在 $document 上，调用由 global-event 属性定义的表达式。事件曝光为$event.

用法示例

<div ng-app="myApp">
   <p>Click this window and press any key</p>
   <p global-keydown='keycode=($event.code)'>
      Global keydown = {{keycode}}
   </p>
</div>

DEMO on JSFiddle.

有关 $event 的详细信息，请参阅 AngularJS Developer Guide -- $event。

Answer 2

很鼓舞人心，但我最终实现了这个：

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 部分其实没什么可做的。

解释：

每个控制器都有一个实现快捷键的handleKeyDown(event)函数
$document.on('keydown', handleKeyDown)控制器初始化时将处理函数绑定到全局按键事件。 $document 是 Angular 的 jQuery 包装器。
当控制器被销毁时取消绑定处理程序
使用$scope.$apply()让Angular知道数据何时发生变化并且需要刷新视图

AngularJS: 如何处理路由控制器中的键盘快捷键？

AngularJS: How to handle keyboard shortcuts in routing controllers?

javascript

keyboard-shortcuts

angularjs

angularjs-directive

angular-ui-router

全局按键指令

用法示例