I have been developing an angular directive to enhance the functionality of ng-table by adding filtering and exporting features. The main goal is to make this directive reusable for multiple tables, which requires the <td> elements to be dynamic. To achieve this, I am utilizing ng-transclude
The issue I am facing is that my <td> elements need certain directives like ng-bind, data-title, and sortable. However, when they are transcluded by the directive, they appear as empty values. I need a solution to delay rendering the <td> rows until they are inserted into the directive.
Below is a snippet of my view markup:
<div>
<my-data-table search-filter="ss" table-values="mvData">
<td data-title="'UUID' | translate" sortable="'id'" ng-bind="row.uuid | shortUuid"></td>
<td data-title="'DEVICE.UNAME' | translate" sortable="'uname'" ng-bind="row.uname"></td>
<td data-title="'DEVICE.LOGIN' | translate" sortable="'last_login'">{{{true: (row.last_login | selectedTimezone | moment:'MMM D, YYYY h:mma'), false: 'N/A'}[!!row.last_login]}}</td>
</my-data-table>
</div>
This is how the directive template looks like:
<div class="row">
<div class="col-sm-12">
<table ng-table="mvData.tableParams" class="table table-striped table-hover table-bordered" template-pagination="src/tables/responsive-pager.html">
<tr ng-repeat="row in $data">
<div ng-transclude></div>
</tr>
</table>
</div>
</div>
And here is the directive declaration:
angular.module('myApp')
.directive('myDataTable',function() {
return {
restrict:'E'
, templateUrl:'src/tables/myDataTable.tpl.html'
, transclude:true
, scope: {
searchFilter:'='
, tableValues:'='
}
, link:function(scope,el,attr,ctrls) {
console.log('hello world');
}
}
});