ng-click funktioniert nicht in ag-grid Zelle

Question

Ich arbeite mit Ag-Grid und ich muss einige benutzerdefinierte Links in einer Zelle hinzufügen und ng-click-Funktion darauf aufrufen. Hier ist mein Code

var columnDefs =[ 
       {headerName: "ID", field: "id"}, 
       {headerName: "Template Name", field: "user_template_name"}, 
       {headerName: "Screen", field: "screen_name"}, 
       {headerName: "Last Uploaded", field: "created_at"},        
       {headerName: "Manage", cellRenderer: createCustomLinks } 
       ]; 
    var gridOptions = { 
         angularCompileRows:true, 
         columnDefs: columnDefs, 
         rowData: null, 
         enableSorting: true, 
         enableColResize: true, 
      }; 
var gridDiv = document.querySelector('#myGrid'); 
new agGrid.Grid(gridDiv, gridOptions);    
gridOptions.columnApi.setColumnVisible('id', false); 
gridOptions.api.sizeColumnsToFit(); 

function createCustomLinks(params) { 
      var cellHtml = '<a ng-click="openTemplateID('+params.data.id+')">Open</a>'; 

      var domElement = document.createElement("span"); 
       domElement.innerHTML = cellHtml; 

       params.$scope.openTemplateID = function(id){ 
        console.log(id); 
       } 

      return domElement; 
      }; 

ich bekam die folgende Fehler

TypeError: _this.$scope is null 
setTimeout(function() { _this.$scope.$apply(); }, 0); 
ag-grid.js (line 7415, col 39) 
Error: this.parentScope is null 
RenderedRow</RenderedRow.prototype.createChildScopeOrNull 

Bitte leite mich, wenn ich etwas falsch tue. Danke.

Answer 1

Wenn zusammen mit AngularJS ag-Gitter mit nicht tun:

var gridDiv = document.querySelector('#myGrid'); 
new agGrid.Grid(gridDiv, gridOptions); 

Statt in Ihrem HTML verwenden

<div ag-grid="gridOptions"></div> // don't forget having grdOptions bind to $scope 

Sie Dies allein löst ein neues Problem: columnApi und api wird undefiniert zum Zeitpunkt der Ausführung. Um dies zu beheben, müssen Sie den onGridReady-Rückruf verwenden:

gridOptions.onGridReady = function(params){ 
    gridOptions.columnApi.setColumnVisible('id', false); 
    gridOptions.api.sizeColumnsToFit(); 
}