# 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.

{{ showCase.message }}

{{ showCase.message }}

angular.module('showcase.bindAngularDirective', ['datatables']) .controller('BindAngularDirectiveCtrl', BindAngularDirectiveCtrl); function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder) { var vm = this; vm.message = ''; vm.edit = edit; vm.delete = deleteRow; vm.dtInstance = {}; vm.persons = {}; vm.dtOptions = DTOptionsBuilder.fromSource('data1.json') .withPaginationType('full_numbers') .withOption('createdRow', createdRow); vm.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(person) { vm.message = 'You are trying to edit the row: ' + JSON.stringify(person); // Edit some data and call server to make changes... // Then reload the data so that DT is refreshed vm.dtInstance.reloadData(); } function deleteRow(person) { vm.message = 'You are trying to remove the row: ' + JSON.stringify(person); // Delete some data and call server to make changes... // Then reload the data so that DT is refreshed vm.dtInstance.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) { vm.persons[data.id] = data; return '
' + '
'; } }