|
| 1 | +<article class="main-content"> |
| 2 | + <header class="article-header"> |
| 3 | + <h1><i class="fa fa-play"></i> Add Angular directive in DOM</h1> |
| 4 | + </header> |
| 5 | + <section class="article-content"> |
| 6 | + <p> |
| 7 | + It's possible to add custom element in the <a href="https://datatables.net/reference/option/dom">DOM</a>, |
| 8 | + however, since the element is rendered by DataTables, we need to do some extra work in order for Angular |
| 9 | + to recognize the directives. |
| 10 | + </p> |
| 11 | + <ul> |
| 12 | + <li>First, we need to define the directive in the DOM</li> |
| 13 | + <li>We then need to create the directive</li> |
| 14 | + <li> |
| 15 | + Just this is not enough because the HTML element is added by DataTables. So Angular does not know |
| 16 | + its existence. So we need to compile it so that Angular takes into account the customBtn directive. |
| 17 | + To do that, we need to create another directive that wraps the table. This wrapper will be used to |
| 18 | + compile the customBtn directive once the table is rendered. |
| 19 | + </li> |
| 20 | + </ul> |
| 21 | + </section> |
| 22 | + <section class="showcase"> |
| 23 | + <tabset> |
| 24 | + <tab heading="Preview"> |
| 25 | + <article class="preview"> |
| 26 | + <div ng-controller="AngularDirectiveInDomCtrl as showCase"> |
| 27 | + <datatable-wrapper> |
| 28 | + <table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"> |
| 29 | + </table> |
| 30 | + </datatable-wrapper> |
| 31 | + </div> |
| 32 | + </article> |
| 33 | + </tab> |
| 34 | + <tab heading="HTML"> |
| 35 | +<div hljs> |
| 36 | +<div ng-controller="CustomElementCtrl as showCase"> |
| 37 | + <datatable-wrapper> |
| 38 | + <table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"> |
| 39 | + </table> |
| 40 | + </datatable-wrapper> |
| 41 | +</div> |
| 42 | +</div> |
| 43 | + </tab> |
| 44 | + <tab heading="JS"> |
| 45 | +<div hljs language="js"> |
| 46 | +angular.module('showcase.customButton', ['datatables']) |
| 47 | + .controller('CustomElementCtrl', CustomElementCtrl) |
| 48 | + .directive('datatableWrapper', datatableWrapper) |
| 49 | + .directive('customElement', customElement); |
| 50 | + |
| 51 | +function CustomElementCtrl(DTOptionsBuilder, DTColumnBuilder) { |
| 52 | + var vm = this; |
| 53 | + vm.dtOptions = DTOptionsBuilder.fromSource('data.json') |
| 54 | + // Add your custom button in the DOM |
| 55 | + .withDOM('<"custom-element">pitrfl'); |
| 56 | + vm.dtColumns = [ |
| 57 | + DTColumnBuilder.newColumn('id').withTitle('ID'), |
| 58 | + DTColumnBuilder.newColumn('firstName').withTitle('First name'), |
| 59 | + DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible() |
| 60 | + ]; |
| 61 | +} |
| 62 | + |
| 63 | +/** |
| 64 | + * This wrapper is only used to compile your custom element |
| 65 | + */ |
| 66 | +function datatableWrapper($timeout, $compile) { |
| 67 | + return { |
| 68 | + restrict: 'E', |
| 69 | + transclude: true, |
| 70 | + template: '<ng-transclude></ng-transclude>', |
| 71 | + link: link |
| 72 | + }; |
| 73 | + |
| 74 | + function link(scope, element) { |
| 75 | + // Using $timeout service as a "hack" to trigger the callback function once everything is rendered |
| 76 | + $timeout(function () { |
| 77 | + // Compiling so that angular knows the button has a directive |
| 78 | + $compile(element.find('.custom-element'))(scope); |
| 79 | + }, 0, false); |
| 80 | + } |
| 81 | +} |
| 82 | + |
| 83 | +/** |
| 84 | + * Your custom element |
| 85 | + */ |
| 86 | +function customElement() { |
| 87 | + return { |
| 88 | + restrict: 'C', |
| 89 | + template: '<h1>My custom element</h1>' |
| 90 | + }; |
| 91 | +} |
| 92 | +</div> |
| 93 | + </tab> |
| 94 | + </tabset> |
| 95 | + </section> |
| 96 | +</article> |
0 commit comments