ng-click won't trigger in ui-grid columnDef template - angularjs

Question

I am trying to trigger a custom function inside of my columnDef cell template as follows:
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');
}
}
This column definition holds the data in my grid. Bss Cell is a custom angular component I made which looks like this:
//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>
How can I get that click to take place so that it runs to the "cellClicked" function inside of my GridComponent, which would then allow me to affect the grid the way I would like.
this.cellTemplates = ['uiGridTreeCellTemplate.html', 'uiGridTreeColumnHeaderTemplate.html'];
this.gridOptions = {
appScopeProvider: this
}

Answer 1

Inside your gridOptions add this:
appScopeProvider: {
cellClicked: this.cellClicked
}
In this way in you grid.appScope you will find the cellClicked function available.
If you have selectable rows, which perform an action when you select one of your rows, I suggest to pass the $event to your grid.appScope.cellClicked() function, then in your appScopeProvider stop the click event, something like this:
ng-click="grid.appScope.cellClicked($event)"
and then
appScopeProvider: {
cellClicked: (event) => {
this.cellClicked();
event.preventDefault();
event.stopPropagation();
}
}