NG-クリックすると、UI-グリッドcolumnDefテンプレート

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

この列の定義は、私のグリッド内のデータを保持しています。私はその後、私を許すことになる、それは私のGridComponentの内側に「cellClicked」機能に実行されるように場所を取るためにクリックして取得できますか

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

：BSSセルは次のようになり、私が作ったカスタム角度成分であります私が望むようにグリッドに影響を与える。あなたのgridOptionsインサイド

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

this.gridOptions = { 
    appScopeProvider: this 
} 

Answer 1

この追加：あなたはcellClicked機能が利用できるでしょうgrid.appScopeあなたにこのように

appScopeProvider: { 
    cellClicked: this.cellClicked 
} 

を。

あなたがあなたの行の1つを選択したときにアクションを実行する選択行を、持っている場合、私はあなたのgrid.appScope.cellClicked()関数に$eventを渡すことをお勧めし、あなたのappScopeProviderにクリックイベントを停止し、このような何か：

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

、その後のフィードバックのための

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