I'm in the process of creating a customized table element that looks like this:
<datatable items='tableItems' columns='columnsConfig' />
Here, 'tableItems' represents my array of items and 'columnsConfig' is the configuration for rendering columns, similar to this:
$scope.tableItems = [...];
$scope.columnsConfig = [
{
name: 'check',
with: '20px',
renderer: function (rowItem, cellValue) {
return '<input ng-click="clickHandler()" type="checkbox"/>';
}
},
{name: "person.fullName", text: "Name", visible: true, width: '150px'},
{
name: "person.age",
text: "Age",
renderer: function(rowItem, cellValue) {
return cellValue + ' years old';
}
}
];
Inside the renderer function, I can include additional data processing or templating.
In my directive template, I've included this:
<tbody>
<tr ng-repeat="item in items">
<td ng-repeat="column in columns"
ng-show="column.visible"
ng-bind-html-unsafe="getCellValue(item, $index)">
</td>
</tr>
</tbody>
where within the 'getCellValue' function, I am calling my renderer function. Here is the directive code:
angular.module('components', [])
.directive('datatable', function () {
return {
restrict: 'E',
templateUrl: '../pages/component/datatable.html',
scope: {
items: "=",
columns: "="
},
controller: function ($scope, $element) {
$scope.getCellValue = function (item, columnIndex) {
var column = $scope.columns[columnIndex];
// return render function result if it has been defined
if (column.renderer) {
return column.renderer(item, getItemValueByColumnName(item, column.name));
}
// return item value by column
return getItemValueByColumnName(item, column.name);
};
}
}
});
Everything works well except for the ng-... directives. It seems like I need to do some extra processing on the results of the 'renderer' function using $compile or something similar, but I haven't quite figured out how to do that yet. So, my question is, how can I make ng directives work when I specify them within my renderer function?
Thank you.