Add Angular directive in DOM

It's possible to add custom element in the DOM, however, since the element is rendered by DataTables, we need to do some extra work in order for Angular to recognize the directives.

angular.module('showcase.customButton', ['datatables']) .controller('CustomElementCtrl', CustomElementCtrl) .directive('datatableWrapper', datatableWrapper) .directive('customElement', customElement); function CustomElementCtrl(DTOptionsBuilder, DTColumnBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.fromSource('data.json') // Add your custom button in the DOM .withDOM('<"custom-element">pitrfl'); vm.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('ID'), DTColumnBuilder.newColumn('firstName').withTitle('First name'), DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible() ]; } /** * This wrapper is only used to compile your custom element */ function datatableWrapper($timeout, $compile) { return { restrict: 'E', transclude: true, template: '', link: link }; function link(scope, element) { // Using $timeout service as a "hack" to trigger the callback function once everything is rendered $timeout(function () { // Compiling so that angular knows the button has a directive $compile(element.find('.custom-element'))(scope); }, 0, false); } } /** * Your custom element */ function customElement() { return { restrict: 'C', template: '

My custom element

' }; }