javascript - 在 angularjs 服务中捕获按键 - 元素无关

Question

我正在尝试按照标题所说的操作，但仍然无法调用任何回调函数。 我想在服务中保留按键检测，并使用“this.keyPressed”成员反射(reflect)按键按下情况。代码对此非常明确。我对观看 Controller 中的事件不感兴趣，我来自 Controller 中。我想创建一个可重用的服务，这样我就可以在其他 Controller 中使用它，而无需重复代码。 我希望能够捕获按键，无论哪个 html 元素具有焦点。

代码:

    'use strict';

app.service(
    'shiftKeyService', ['$rootScope', function ($rootScope) {

        var that = this;

        this.keyPressed = false;
        this.cleanUp = CleanUpService;


        var hUpCleaner = $rootScope.$on("keyup", HandlerUp);
        var hDownCleaner = $rootScope.$on("keydown", HandlerDown);

        $rootScope.$on('keypress', function (e, a, key) {
            alert("gotcha");
        })

        /////////////////////////////////////////////////////////////////////////////
        function CleanUpService() {
            hDownCleaner();
            hDownCleaner();
        }

        function HandlerUp(e) {
            if (e.keyCode === 16) {
                that.keyPressed = false;
            }
        }

        function HandlerDown(e) {
            if (e.keyCode === 16) {
                that.keyPressed = true;
            }
        }
    }]);

Answer 1

这是我为此提供的最终工作服务:

(function (ng, app) {
    'use strict';

    app.service(
        'shiftKeyService', ['$rootScope', function ($rootScope) {

            var that = this;
            var $doc = angular.element(document);

            this.keyPressed = false;
            this.cleanUp = CleanUpService;


            $doc.on("keyup", HandlerUp);
            $doc.on("keydown", HandlerDown);

            /////////////////////////////////////////////////////////////////////////////
            function CleanUpService() {
                $doc.off("keyup", HandlerUp);
                $doc.off("keydown", HandlerDown);
            }

            function HandlerUp(e) {
                if (e.keyCode === 16) {
                    that.keyPressed = false;
                }
            }

            function HandlerDown(e) {
                if (e.keyCode === 16) {
                    that.keyPressed = true;
                }
            }
        }]);

})(angular, myApp);

现在你可以像这样使用它:

(function (ng, app) {

    "use strict";

    app.controller(
        "production.DocumentsController",
        ['$scope', 'shiftKeyService',
        function ($scope, shiftKeyService) {

            //shiftKeyService.keyPressed is your weapon of choice, it's updated on every keyDown/keyUp.

            //and if you no longer require it :
            $scope.$on("$destroy", function () {
                shiftKeyService.CleanUp();
            });          
        }]);
})(angular, myApp);