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

然后我可以在我的控制器中添加一个将被调用的函数：

 $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()这是角度的调试功能，如果在生产中禁用调试信息，则无法使用。

所以现在我正在寻找一种没有element.scope()的替代解决方案。所以问题是：“如何在不依赖角度调试功能的情况下选择右键单击元素”。

Answer 1

行id存储在cell元素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

Answer 2

如果您对覆盖调试行为感到满意，可以选择：

angular.reloadWithDebugInfo()

不漂亮，但它会起作用。

来源：https://www.toptal.com/angular-js/top-18-most-common-angularjs-developer-mistakes

Answer 3

您还可以使用 ng-mouseover 引用某个范围方法（请参阅下面的$ scope.selectRowOnMouseOver）定义行模板，该方法将行（在鼠标光标下）设置为某个范围变量。然后，您可以使用此变量在rightClick方法中设置选择：

定义行模板：

     //define row template with ng-mouseover reference to scope method
    $scope.resultsGrid.rowTemplate =
        "<div ng-dblclick=\"grid.appScope.doubleClickOnRow(row, $event)\" ng-repeat=\"(colRenderIndex, col) in" +
        " colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell':" +
        " col.isRowHeader }\" ng-mouseover=\"grid.appScope.selectRowOnMouseOver(row)\" ui-grid-cell></div>";

定义方法，它将在范围变量中设置光标下的行（或立即在此行上设置选择）：

    $scope.selectRowOnMouseOver = function (row) {
        $scope.rowUnderMouse =  row;
        //you can also select row right here or in other methods using above variable
        $scope.gridApi.selection.clearSelectedRows();
        row.setSelected(true);
    };

在rightClick方法中使用范围变量：

    $scope.rightClick = function (event) {
        var row = $scope.rowUnderMouse;
        //clear other selections
        $scope.gridApi.selection.clearSelectedRows();
        //set row as selected
        row.setSelected(true);
        //...
    }

右键单击

3 个答案: