Question

我试图在我的columnDef单元格模板中触发自定义函数，如下所示：

export class GridComponent {
   constructor() {}

   this.gridOptions = {
       // grid options defined here
       columnDef.cellTemplate = '<bss-cell cellval="{{row.entity[col.name]}}"></bss-cell>';
   }

   private cellClicked () {
        // need to get the click event here but can't
        console.log('got here');
   }
}

此列定义保存网格中的数据。 Bss Cell是我制作的自定义角度组件，如下所示：

//BSS CELL CONTROLLER CODE FOR THE COLUMN DEF CELL TEMPLATE

import * as angular from 'angular';
import '../../../../modules/bss/bss.component';

export class TreeCellComponent {

    constructor() {
    }

    private cellClicked () {
        // click event does come here if I call $ctrl.cellClicked() from my template but this isn't connected to the grid
    }
}


angular.module('app.modules.uigridtemplates.bss-cell', ['app.modules.bss'])
.component('bssCell', {
    bindings: {
        cellval: '@'
    },
    controller: TreeCellComponent,
    template: require('./bss-cell.html')
});


// BSS CELL DIRECTIVE TEMPLATE
<div ng-click="grid.AppScope.cellClicked()" align="right" class="ui-grid-cell-contents-data-grid" title="
      {{$ctrl.cellval}}">
      <span>{{$ctrl.cellval}}</span>
</div>

如何进行单击以使其运行到GridComponent内部的“cellClicked”函数，这样我就可以按照自己的方式影响网格。

 this.cellTemplates = ['uiGridTreeCellTemplate.html', 'uiGridTreeColumnHeaderTemplate.html'];

 this.gridOptions = {
    appScopeProvider: this  
 }

Answer 1

在appScopeProvider: { cellClicked: this.cellClicked }内添加此内容：

grid.appScope

通过这种方式cellClicked，您会发现$event功能可用。

如果您有可选择的行，当您选择其中一行时执行操作，我建议您将grid.appScope.cellClicked()传递到appScopeProvider函数，然后在ng-click="grid.appScope.cellClicked($event)"停止点击事件，如下所示：

appScopeProvider: {
    cellClicked: (event) => {
        this.cellClicked();
        event.preventDefault();
        event.stopPropagation();
    }
}

然后

MediaFrameReader

ng-click不会在ui-grid columnDef模板中触发

1 个答案: