从 ag-grid 单元格模板访问范围答案

【问题标题】：access scope from ag-grid cell template从 ag-grid 单元格模板访问范围
【发布时间】：2021-01-14 04:27:14
【问题描述】：

如何从 ag-grid 单元格模板触发 Angular js 函数（ng-blur）？

下面是我对 ag-grid 的列定义

var columnDefs = [
          {headerName: "Make", field: "make" , template:'<input type="text" class="form-control control-width-90 margin-left-5" ng-blur="alert(\'wewew\')"/>'},
          {headerName: "Model", field: "model"},
          {headerName: "Price", field: "price"}
        ];

农业网格数据

var rowData = [
          {make: "Toyota", model: "Celica", price: 35000},
          {make: "Ford", model: "Mondeo", price: 32000},
          {make: "Porsche", model: "Boxter", price: 72000}
        ];

网格选项

$scope.gridOptions = {
              columnDefs: columnDefs,
              rowData: rowData
};

输出 [输出的 PFA][1] [1]：https://i.stack.imgur.com/WEttX.png

根据列定义，我可以渲染模板，但无法触发模糊事件。谁能建议我如何从自定义模板触发事件或从 ag-grid 自定义模板访问范围？提前致谢！

【问题讨论】：

标签： angularjs ag-grid ag-grid-angular

【解决方案1】：

您想在单元格值更改时触发事件吗？然后就可以使用 ag grid 的 (cellValueChanged) 事件了。

【讨论】：

cellValueChanged 事件是使用 ag-grid 默认列定义触发的。在我的情况下，我有一个用于列定义的自定义单元格模板，并在我的输入元素模糊时触发一个事件。您可以查看我的列定义，其中我提到了字段“make”的模板。
在这种情况下使用 cellRenderer 而不是模板，如下所示： cellRenderer: (params) => { let input = document.createElement("INPUT"); input.setAttribute("类型", "文本"); input.addEventListener('blur', (e) => { this.onblur(); });返回输入； }