Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Commit d83b6b0

Browse files
l-linl-lin
committed
Add angular directive in DOM example #402 
1 parent c0ef401 commit d83b6b0

File tree

5 files changed

+148
-0
lines changed

5 files changed

+148
-0
lines changed

‎demo/advanced/angularDirectiveInDOM.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<article class="main-content">
2+
<header class="article-header">
3+
<h1><i class="fa fa-play"></i>&nbsp;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>

‎demo/advanced/angularDirectiveInDOM.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
'use strict';
2+
angular.module('showcase.angularDirectiveInDOM', ['datatables'])
3+
.controller('AngularDirectiveInDomCtrl', AngularDirectiveInDomCtrl)
4+
.directive('datatableWrapper', datatableWrapper)
5+
.directive('customElement', customElement);
6+
7+
function AngularDirectiveInDomCtrl(DTOptionsBuilder, DTColumnBuilder) {
8+
var vm = this;
9+
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
10+
// Add your custom button in the DOM
11+
.withDOM('<"custom-element">pitrfl');
12+
vm.dtColumns = [
13+
DTColumnBuilder.newColumn('id').withTitle('ID'),
14+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
15+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
16+
];
17+
}
18+
19+
/**
20+
* This wrapper is only used to compile your custom element
21+
*/
22+
function datatableWrapper($timeout, $compile) {
23+
return {
24+
restrict: 'E',
25+
transclude: true,
26+
template: '<ng-transclude></ng-transclude>',
27+
link: link
28+
};
29+
30+
function link(scope, element) {
31+
// Using $timeout service as a "hack" to trigger the callback function once everything is rendered
32+
$timeout(function () {
33+
// Compiling so that angular knows the button has a directive
34+
$compile(element.find('.custom-element'))(scope);
35+
}, 0, false);
36+
}
37+
}
38+
39+
/**
40+
* Your custom element
41+
*/
42+
function customElement() {
43+
return {
44+
restrict: 'C',
45+
template: '<h1>My custom element</h1>'
46+
};
47+
}

‎demo/app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ angular.module('showcase', [
1313
'showcase.dataReload.withPromise',
1414
'showcase.disableDeepWatchers',
1515
'showcase.loadOptionsWithPromise',
16+
'showcase.angularDirectiveInDOM',
1617
'showcase.rerender',
1718
'showcase.rowClickEvent',
1819
'showcase.rowSelect',

‎demo/usages.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@ angular.module('showcase.usages', ['ngResource'])
3232
}, {
3333
name: 'dataReloadWithPromise',
3434
label: 'Data reload with promise'
35+
}, {
36+
name: 'angularDirectiveInDOM',
37+
label: 'Angular directive in DOM'
3538
}, {
3639
name: 'rerender',
3740
label: 'Re-render a table'

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ <h1>
119119
<script src="demo/advanced/changeOptions.js"></script>
120120
<script src="demo/advanced/dataReloadWithAjax.js"></script>
121121
<script src="demo/advanced/dataReloadWithPromise.js"></script>
122+
<script src="demo/advanced/angularDirectiveInDOM.js"></script>
122123
<script src="demo/advanced/rerender.js"></script>
123124
<script src="demo/advanced/rowClickEvent.js"></script>
124125
<script src="demo/advanced/rowSelect.js"></script>

0 commit comments

Comments
 (0)