angularjs - 自定义单元格模板中带有按钮的 UI-Grid - 如何取消行选择事件？

Question

我使用的是 ui-Grid v 3.0.1。

我有一个特定列的自定义单元格模板，它在每行中显示一个按钮。我附加了一个 ng-click 属性，它调用 appScope 来触发某些操作。

一切都很完美。

但是，单击自定义模板按钮也会导致切换相关行的选择。

我需要防止这种情况发生。

即单击自定义模板按钮应保持当前行的选择状态不变。

我怀疑我需要以某种方式取消行选择事件。

有人能指出我正确的方向吗？

vm.gridOptions = {
        data: "vm.myGridData",
        columnDefs: [
            { field: "Col1", displayName: "Col1", width: 100 },
            { field: "Col2", displayName: "Col2", width: 200 },
            { name: " ", cellTemplate: "<div><button ng-click='grid.appScope.displayRecord(row.entity)'><i class='fa fa-search'></i></button></div>" }
        ],
        enableRowSelection: true,
        enableSelectAll: true,
        showGridFooter: true,
        multiSelect: true,
        enableSorting: true,
        enableFiltering: true,
        enableFullRowSelection: true,
        enableRowHeaderSelection: true
    };

Answer 1

只需添加

$event.stopPropagation();

到 ng-click 属性，如您在 plunker 中看到的那样.

您可以在 ng-click 属性内链接 javascript 调用，只需使用 ; 作为分隔符将它们一个接一个地写入，例如这个:

ng-click = "instructionOne(); instructionTwo(argument); $event.stopPropagation();"