Question

我正在尝试做标题所说的内容，但我仍然无法调用任何回调函数。我想在服务中保持密钥检测，并使用“this.keyPressed”成员反映按键。代码非常明确。我对控制器中的事件没有兴趣，我是从那里来的。我想创建一个可重用的服务，以便我可以在其他控制器中使用它，而无需重复代码。无论哪个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

更新：

您可以创建一个这样的指令：

app.directive("shiftDirective",function(){
    return{
         link:function(scope,elem,attrs){
             elem.on('keypress', function(){
                 // keypress stuff
             }),
             elem.on('keyup', function() {
                 // keyup stuff
             }),
             elem.on('keydown', function() {
                 // keydown stuff
             })
         }
    }
})

然后您可以在任何地方使用此指令而无需重新编码，只需将其添加到其他指令中即可：

<div shift-directive></div>
<input shift-directive type="text" />

OLD VERSION：

您可以在您希望收听关键事件的元素上使用以下指令之一（不要忘记该元素必须在您所需的控制器范围内）：

ng-keypress="myEventHandler($event)"
ng-keyup="myEventHandler($event)"
ng-keydown="myEventHandler($event)"

在控制器中，定义用户触发事件时将调用的函数：

$scope.myEventHandler = function(event) {
  if (event.which === 13)
    alert('Key 13 pressed');
}

Answer 2

这是我最后的工作服务：

(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);

Answer 3

创建自定义指令，你可以手动调用keypress事件

app.directive("myDirective",function(){
    return{
         link:function(scope,elem,attrs){
            elem.on('keypress', function(){
            // do some thing here 
          } 
        }
     }
})

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

3 个答案: