我正在尝试在ag-grid实例上创建customRenderer。我将params传递给一个返回dom元素的函数,该元素是一个角度分量。尽管在DOM检查中通过chrome devtools显示字段中有一个字符串,但组件的绑定在console.logs中显示为未定义。将params.value放入组件绑定之前的console.log表明它确实存在。
表组件:
var component = {
controller: function () {
var ctrl = this;
ctrl.gridOptions = {
columnDefs: [
{headerName: "Make", field: "make", cellRenderer: customRendererFunc},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"}
],
rowData: [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
],
angularCompileRows: true,
};
ctrl.$onInit = function () {}
function customRendererFunc(params) {
console.log('customRendererFunc', params.value);
return '<custom-renderer stupid="'+params.value+'"></custom-renderer>'
}
},
template: '<div ag-grid="$ctrl.gridOptions" class="ag-fresh" style="height: 400px;"></div>'
}
角度组件:
var customRenderer = {
bindings: {
cellValue: '<',
column: '<'
},
controller: function () {
var ctrl = this;
ctrl.$onInit = function () {};
ctrl.$postLink = function () {
console.log('cellRenderer ctrl.cellValue', ctrl.cellValue)
console.log('cellRenderer ctrl.column', ctrl.column)
}
},
template: '<div ng-bind-html="$ctrl.cellValue"></div>'
}
plnkr在这里: https://plnkr.co/edit/yfBjMDAKNKgBXdN3rkcN?p=preview