javascript - 右键单击 ui-grid 选择

Question

我希望能够在右键单击该行时选择该行。

到目前为止，我有以下解决方案(我的想法来自 here ):

我创建了一个这样的右键单击指令:

app.directive('rightClick', function($parse) {
   return function(scope, element, attrs) {
       var fn = $parse(attrs.rightClick);
       element.bind('contextmenu', function(event) {
       scope.$apply(function() {
           event.preventDefault();
               fn(scope, {$event:event});
           });
       });
    };
});

然后我可以在我的 Controller 中添加一个将被调用的函数:

 $scope.rightClick = function (event) {
     var scope = angular.element(event.toElement).scope();
     if (scope.row.entity !== undefined) {
         //... select element by calling gridApi
     }
 };

添加带有属性 right-click="rightClick($event)" 的指令当然是必需的。

此解决方案的问题在于它依赖于 element.scope()，这是 Angular 的调试功能，如果调试信息在生产中被禁用，则将不可用。

所以现在我正在寻找一种无需 element.scope() 即可工作的替代解决方案。所以问题是:“如何在不依赖 Angular 调试功能的情况下右键单击选择元素”。

Answer 1

行 ID 存储在单元格元素 ID 上，可用于识别单击了哪个单元格:

$scope.rightClick = function (event) {
  var element = angular.element(event.toElement);

  //get cellId which for the thrid row should something like this
  //1464688691229-2-uiGrid-0006-cell
  var id = element[0].parentElement.id;

  var regex = /(\d+)/g
  var result = id.match(regex);
  var rowIndex = parseInt(result[1]); //extract second numeric match

  $scope.gridApi.selection.selectRowByVisibleIndex(rowIndex);      
};

我想说您可能需要试验一下，看看该 id 是可见索引还是源数据的索引。我不确定，但我在这里放了一个工作示例。

http://plnkr.co/edit/b2RKW0hdtFk1ZOLn1XsS?p=preview