将 keydown 事件定位到 angularJS 自定义指令

Posted 2023-02-23

【中文标题】将 keydown 事件定位到 angularJS 自定义指令

【英文标题】：Targeting keydown events to an angularJS custom directive

【发布时间】：2021-07-11 18:45:57

【问题描述】：

我正在处理一个问题，其中我需要在某个自定义指令和某些条件下（某个选项卡应该是选择）。我目前的方法是在文档本身上绑定 keydown 事件，广播它，然后在所需的自定义指令中收听它。以下是我放在 app.run.. 块中的代码 -

    angular.element($document).on('keydown', function(evt) 
        if(evt.ctrlKey && evt.key==='p')
             $rootScope.$broadcast('printOnKeyPress');
        
    );

这部分按预期工作，当我尝试在自定义指令的所需控制器中处理它时出现问题，如下所示：

    $scope.$on('printOnKeyPress', function() 
      //point to existing print function
    

这就是问题出现的地方。它进入打印功能，但输出仍然不正确。我错过了一些东西，我不知道是什么。 此外，这不是一个好方法，但我已经搜索并且无法找到一种可能的解决方案来仅在该自定义指令本身上绑定 keydown 事件（该组件仅在选择文档时出现）。 （ng-keydown 在这里也不起作用） 任何帮助表示赞赏！

【参考方案1】：

你可以把它放在指令中并使用作用域destroy事件来移除监听器。

指令链接函数内：

function keyHandler(evt) 
  if (evt.ctrlKey && evt.key === 'p') 
    // do your print
  


angular.element($document).on('keydown', keyHandler);

scope.$on('$destroy', function() 
  angular.element($document).off('keydown', keyHandler);
);

【讨论】：

这行得通，我现在可以将它绑定到自定义指令上，但简单地调用 print 函数不起作用，返回值始终未定义，但这是我必须在我的结尾。非常感谢！