javascript - 使用 CellNav + Edit 会导致网格从网格外部的输入中窃取焦点

Question

我有一个应用程序将 ui-grid 与 cellNav 结合使用，并使用 editOnFocus=true 对某些列进行编辑。我遇到的问题是编辑功能中的 END_CELL_EDIT 和 CANCEL_CELL_EDIT 总是调用 gridCtrl.focus()。如果我有一个可编辑的单元格，然后单击网格外的输入，它会窃取焦点并将其放回网格中。

发生的事情是我点击了网格外的输入。它获得焦点。同时触发 END_CELL_EDIT 事件。然后调用 gridCtrl.focus() 并将焦点从外部输入框移开。

有没有办法在 ui-grid.edit 中覆盖此行为？为什么这种行为标准？

这里有一个plnkr来演示。如果您单击年龄列使其进入编辑模式，然后单击文本区域，您将看到它暂时获得焦点并有一个光标，但很快网格就会夺回焦点，您将无法再编辑。

http://plnkr.co/edit/Sg1dTcsMN0zNRDmauwoT 这种行为对我的情况来说并不理想，因为无论何时选择或导航到该行，我们都会自动关注特定的单元格(进入编辑模式)。因此，任何更改行或将焦点移出网格的操作都会触发 END_CELL_EDIT 事件和上述焦点行为。

Answer 1

诀窍是设置另一个焦点，但将其延迟一个摘要周期 - 从而允许网格执行其需要的操作。下面是您更新后的 Plunker 中的相关代码片段。

HTML(用于绑定(bind)):

<textarea id="textarea" ng-focus="delayFocus()"></textarea>

Controller (允许摘要循环):

$scope.delayFocus = function() {
  $timeout(function() {
    focus('textarea');
    $scope.gridApi.grid.cellNav.clearFocus();
  });
}

工厂(用于重新聚焦):

app.factory('focus', function($timeout, $window) {
  return function(id) {
    // timeout makes sure that it is invoked after any other event has been triggered.
    // e.g. click events that need to run before the focus or
    // inputs elements that are in a disabled state but are enabled when those events
    // are triggered.
    $timeout(function() {
      var element = $window.document.getElementById(id);
      if (element)
        element.focus();
    });
  };
});

更新 Plunker，http://plnkr.co/edit/UX8tbVwi9gG4zsMRG0kV?p=preview .

您可能可以将以上内容组合成一个指令，然后将其应用于所需的控件 - 如果需要/需要，我们很乐意提供帮助。

希望这能让您有个好的开始。