ng-clic ne se déclenche pas dans le modèle columnDef ui-grid

Question

Je suis en train de déclencher une fonction personnalisée à l'intérieur de mon modèle cellulaire columnDef comme suit:

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

Cette définition de la colonne contient les données dans mon réseau. Bss cellulaire est un élément angulaire sur mesure que je fait qui ressemble à ceci:

//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> 

Comment puis-je obtenir que cliquer pour avoir lieu pour qu'il fonctionne à la fonction « cellClicked » à l'intérieur de mon GridComponent, qui serait alors me permettre affecter la grille comme je le voudrais.

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

this.gridOptions = { 
    appScopeProvider: this 
} 

Answer 1

l'intérieur de votre gridOptions ajouter ceci:

appScopeProvider: { 
    cellClicked: this.cellClicked 
} 

De cette façon vous grid.appScope vous trouverez la fonction cellClicked disponible.

Si vous avez des lignes sélectionnables, qui effectuent une action lorsque vous sélectionnez l'une de vos lignes, je suggère de passer le $event à votre fonction grid.appScope.cellClicked(), puis dans votre appScopeProvider arrêter l'événement de clic, quelque chose comme ceci:

ng-click="grid.appScope.cellClicked($event)" 

puis

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