AngularJS 1.x中ui-grid拦截键盘事件致内置指令失效问题求助

你推测的完全正确——ui-grid确实会在单元格层面优先处理键盘事件，比如上下键默认绑定行切换逻辑，这就导致你的自定义指令无法捕获到对应的按键事件。下面是针对两个问题的具体修复方案：

一、修复Datepicker的T键选择今日功能 #

核心思路是让你的datepicker指令优先捕获T键事件，阻止事件继续向上冒泡到ui-grid的事件处理器：

angular.module('yourApp').directive('customDatepicker', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      // 监听键盘按下事件
      element.on('keydown', function(event) {
        // 匹配大小写T键
        if (event.key.toLowerCase() === 't') {
          // 设置今日日期到ngModel
          const today = new Date();
          ngModelCtrl.$setViewValue(today);
          ngModelCtrl.$render();
          
          // 阻止事件传递给ui-grid，避免被拦截
          event.stopPropagation();
          event.preventDefault();
        }
      });

      // 清理事件监听，避免内存泄漏
      scope.$on('$destroy', function() {
        element.off('keydown');
      });
    }
  };
});

在你的grid cellTemplate里使用这个指令时，确保输入框正确绑定指令：

<div>
  <input type="text" custom-datepicker ng-model="row.entity.dateField" />
</div>

二、修复ng-typeahead向下键滚动选项的问题 #

ng-typeahead的上下键事件被ui-grid的行切换逻辑拦截了，我们需要在下拉框打开时临时阻止ui-grid处理这些按键：

方案1：通过事件冒泡拦截 #

angular.module('yourApp').directive('gridTypeahead', function() {
  return {
    link: function(scope, element) {
      // 监听typeahead的打开/关闭事件（以ui-bootstrap的typeahead为例）
      element.on('typeahead-open', function() {
        // 当下拉框打开时，拦截上下键事件
        element.on('keydown', handleKeydown);
      });

      element.on('typeahead-close', function() {
        // 下拉框关闭后移除拦截
        element.off('keydown', handleKeydown);
      });

      function handleKeydown(event) {
        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
          // 阻止事件传递给ui-grid，让typeahead处理滚动
          event.stopPropagation();
        }
      }

      // 清理监听
      scope.$on('$destroy', function() {
        element.off('typeahead-open typeahead-close keydown');
      });
    }
  };
});

然后在cellTemplate里给typeahead输入框添加这个指令：

<div>
  <input type="text" grid-typeahead 
         ng-model="row.entity.selectedItem"
         uib-typeahead="item as item.name for item in items | filter:$viewValue" />
</div>

方案2：修改ui-grid的键盘映射（全局/局部） #

如果你希望更彻底地控制ui-grid的键盘行为，可以修改它的默认键盘映射：

angular.module('yourApp').run(function(uiGridConstants) {
  // 移除或修改上下键的默认行切换行为
  delete uiGridConstants.keymap.arrowdown;
  delete uiGridConstants.keymap.arrowup;
  
  // 或者仅在特定网格中禁用：在gridOptions里设置
  // $scope.gridOptions = {
  //   enableKeyboardNavigation: false,
  //   // ...其他配置
  // };
});

⚠️ 注意：全局修改键盘映射会影响所有ui-grid的键盘导航功能，仅推荐在特定网格中局部禁用。

内容的提问来源于stack exchange，提问作者Lynob