ng-click 在 ag-grid 单元格内不起作用答案

【问题标题】：ng-click not worked inside ag-grid cellng-click 在 ag-grid 单元格内不起作用
【发布时间】：2016-09-17 09:49:12
【问题描述】：

我正在使用 ag-grid，我需要在单元格中添加一些自定义链接，并希望在其上调用 ng-click 函数。这是我的代码

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

我收到以下错误

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

如果我做错了什么，请指导我。谢谢。

【问题讨论】：

标签： angularjs ag-grid

【解决方案1】：

我曾经遇到过这个问题。我们需要在网格选项中定义它。将 angularCompileRows 设置为 true 为我解决了这个问题

$scope.gridOptions = {
        columnDefs: $scope.columnDefs,
        rowData: $scope.rowData,
        // all other options 
        angularCompileRows: true
    };

【讨论】：

小心，如果这样做，您将失去 ag grid 的所有性能优势。

【解决方案2】：

当使用 ag-grid 和 angularJS 时不要这样做：

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

改为在您的 HTML 中使用

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

仅此一项就会引发一个新问题：columnApi 和 api 在执行时将是未定义的。要解决此问题，您必须使用 onGridReady 回调：

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

【讨论】：