Binding Angular directive to the DataTable

If you are not using the Angular way of rendering your DataTable, but you want to be able to add Angular directives in your DataTable, you can do it by recompiling your DataTable after its initialization is over.

{{ message }}


{{ message }}


angular.module('datatablesSampleApp', ['datatables']).controller('BindAngularDirectiveCtrl', BindAngularDirectiveCtrl); function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder) { $scope.message = ''; $scope.edit = edit; $scope.delete = deleteRow; $scope.dtOptions = DTOptionsBuilder.fromSource('data1.json') .withPaginationType('full_numbers') .withOption('createdRow', createdRow); $scope.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('ID'), DTColumnBuilder.newColumn('firstName').withTitle('First name'), DTColumnBuilder.newColumn('lastName').withTitle('Last name'), DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable() .renderWith(actionsHtml) ]; function edit(id) { $scope.message = 'You are trying to edit the row with ID: ' + id; // Edit some data and call server to make changes... // Then reload the data so that DT is refreshed $scope.dtOptions.reloadData(); } function deleteRow(id) { $scope.message = 'You are trying to remove the row with ID: ' + id; // Delete some data and call server to make changes... // Then reload the data so that DT is refreshed $scope.dtOptions.reloadData(); } function createdRow(row, data, dataIndex) { // Recompiling so we can bind Angular directive to the DT $compile(angular.element(row).contents())($scope); } function actionsHtml(data, type, full, meta) { return ' ' + ''; } }