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

Commit b55ed10

Browse files
l-linl-lin
committed
Support directives in the loading message #529 
1 parent 54b4350 commit b55ed10

10 files changed

+65
-37
lines changed

‎demo/app.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ angular.module('showcase', [
4343
.config(sampleConfig)
4444
.config(routerConfig)
4545
.config(translateConfig)
46-
.factory('DTLoadingTemplate', dtLoadingTemplate);
46+
.run(initDT);
4747

4848
backToTop.init({
4949
theme: 'classic', // Available themes: 'classic', 'sky', 'slate'
@@ -110,8 +110,6 @@ function translateConfig($translateProvider) {
110110
$translateProvider.preferredLanguage('en');
111111
}
112112

113-
function dtLoadingTemplate() {
114-
return {
115-
html: '<img src="/angular-datatables/images/loading.gif" />'
116-
};
113+
function initDT(DTDefaultOptions) {
114+
DTDefaultOptions.setLoadingTemplate('<img src="/angular-datatables/images/loading.gif" />');
117115
}

‎demo/basic/angularWayWithOptions.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
angular.module('showcase.angularWay.withOptions', ['datatables', 'ngResource'])
33
.controller('AngularWayWithOptionsCtrl', AngularWayWithOptionsCtrl);
44

5-
function AngularWayWithOptionsCtrl($resource, DTOptionsBuilder, DTColumnDefBuilder) {
5+
function AngularWayWithOptionsCtrl($scope, $resource, DTOptionsBuilder, DTColumnDefBuilder) {
66
var vm = this;
77
vm.persons = [];
88
vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withDisplayLength(2);

‎demo/basic/overrideLoadingTpl.html

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Override <code>Loading</code> template</h1>
1010
<li>
1111
One comes from this module. It is displayed before the table is rendered. This loading has been added because
1212
angular-datables offers the possibility to fetch the data and options with promises. So before rendering the
13-
table, the promises need to be resoved, thus adding a loading message to let users know that something is
13+
table, the promises need to be resolved, thus adding a loading message to let users know that something is
1414
processing.
1515
</li>
1616
<li>
@@ -22,17 +22,20 @@ <h1><i class="fa fa-play"></i>&nbsp;Override <code>Loading</code> template</h1>
2222
When loading data, the angular module will display by default <code>&lt;h3 class="dt-loading"&gt;Loading...&lt;/h3&gt;</code>.
2323
</p>
2424
<p>
25-
You can make your own custom loading html by override the <code>DTLoadingTemplate</code> like this:
25+
You can make your own custom loading html by calling the method <code>DTDefaultOptions.setLoadingTemplate()</code> like this:
2626
</p>
27+
<div class="alert alert-info">
28+
<p>
29+
Angular-datatables is using the angular service <code>$compile</code>. So you can use angular directives if you want.
30+
</p>
31+
</div>
2732
</section>
2833
<section class="showcase no-tab">
2934
<div hljs>
3035
angular.module('showcase', ['datatables']).
31-
factory('DTLoadingTemplate', dtLoadingTemplate);
32-
function dtLoadingTemplate() {
33-
return {
34-
html: '<img src="images/loading.gif" />'
35-
};
36+
run(initDT);
37+
function initDT(DTDefaultOptions) {
38+
DTDefaultOptions.setLoadingTemplate('<img src="images/loading.gif" />');
3639
}
3740
</div>
3841
</section>

‎dist/angular-datatables.js

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -411,17 +411,14 @@ function dtColumnDefBuilder(DTColumnBuilder) {
411411
}
412412
dtColumnDefBuilder.$inject = ['DTColumnBuilder'];
413413

414-
function dtLoadingTemplate($compile) {
415-
var template = {};
416-
417-
template.html = '<h3 class="dt-loading">Loading...</h3>';
418-
419-
template.compileHtml = function ($scope) {
420-
return $compile(angular.element(template.html))($scope);
414+
function dtLoadingTemplate($compile, DTDefaultOptions) {
415+
return {
416+
compileHtml: function($scope) {
417+
return $compile(angular.element(DTDefaultOptions.loadingTemplate))($scope);
418+
}
421419
};
422-
423-
return template;
424420
}
421+
dtLoadingTemplate.$inject = ['$compile', 'DTDefaultOptions'];
425422

426423
'use strict';
427424

@@ -606,7 +603,9 @@ angular.module('datatables.options', [])
606603

607604
function dtDefaultOptions() {
608605
var options = {
606+
loadingTemplate: '<h3 class="dt-loading">Loading...</h3>',
609607
bootstrapOptions: {},
608+
setLoadingTemplate: setLoadingTemplate,
610609
setLanguageSource: setLanguageSource,
611610
setLanguage: setLanguage,
612611
setDisplayLength: setDisplayLength,
@@ -615,6 +614,16 @@ function dtDefaultOptions() {
615614

616615
return options;
617616

617+
/**
618+
* Set the default loading template
619+
* @param loadingTemplate the HTML to display when loading the table
620+
* @returns {DTDefaultOptions} the default option config
621+
*/
622+
function setLoadingTemplate(loadingTemplate) {
623+
options.loadingTemplate = loadingTemplate;
624+
return options;
625+
}
626+
618627
/**
619628
* Set the default language source for all datatables
620629
* @param sLanguageSource the language source
@@ -773,6 +782,7 @@ function dtDefaultRenderer($q, DTRenderer, DTRendererService, DTInstanceFactory)
773782
function create(options) {
774783
var _oTable;
775784
var _$elem;
785+
var _$scope;
776786
var renderer = Object.create(DTRenderer);
777787
renderer.name = 'DTDefaultRenderer';
778788
renderer.options = options;
@@ -781,8 +791,9 @@ function dtDefaultRenderer($q, DTRenderer, DTRendererService, DTInstanceFactory)
781791
renderer.changeData = changeData;
782792
renderer.rerender = rerender;
783793

784-
function render($elem) {
794+
function render($elem, $scope) {
785795
_$elem = $elem;
796+
_$scope = $scope;
786797
var dtInstance = DTInstanceFactory.newDTInstance(renderer);
787798
var result = DTRendererService.hideLoadingAndRenderDataTable($elem, renderer.options);
788799
_oTable = result.DataTable;
@@ -800,7 +811,7 @@ function dtDefaultRenderer($q, DTRenderer, DTRendererService, DTInstanceFactory)
800811

801812
function rerender() {
802813
_oTable.destroy();
803-
DTRendererService.showLoading(_$elem, $scope);
814+
DTRendererService.showLoading(_$elem, _$scope);
804815
render(_$elem);
805816
}
806817
return renderer;
@@ -880,7 +891,7 @@ function dtNGRenderer($log, $q, $compile, $timeout, DTRenderer, DTRendererServic
880891

881892
function rerender() {
882893
_destroyAndCompile();
883-
DTRendererService.showLoading(_$elem, $scope);
894+
DTRendererService.showLoading(_$elem, _parentScope);
884895
$timeout(function() {
885896
var result = DTRendererService.hideLoadingAndRenderDataTable(_$elem, renderer.options);
886897
_oTable = result.DataTable;

‎dist/angular-datatables.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/angular-datatables.directive.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ function dataTable($q, $http, DTRendererFactory, DTRendererService, DTPropertyUt
3535
angular.forEach(['dtColumns', 'dtColumnDefs', 'dtOptions'], function(tableDefField) {
3636
$scope[watchFunction].call($scope, tableDefField, handleChanges, true);
3737
});
38-
DTRendererService.showLoading($elem);
38+
DTRendererService.showLoading($elem, $scope);
3939
ctrl.render($elem, ctrl.buildOptionsPromise(), _staticHTML);
4040
};
4141
}

‎src/angular-datatables.factory.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -268,8 +268,10 @@ function dtColumnDefBuilder(DTColumnBuilder) {
268268
};
269269
}
270270

271-
function dtLoadingTemplate() {
271+
function dtLoadingTemplate($compile, DTDefaultOptions) {
272272
return {
273-
html: '<h3 class="dt-loading">Loading...</h3>'
273+
compileHtml: function($scope) {
274+
return $compile(angular.element(DTDefaultOptions.loadingTemplate))($scope);
275+
}
274276
};
275277
}

‎src/angular-datatables.options.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ angular.module('datatables.options', [])
1212

1313
function dtDefaultOptions() {
1414
var options = {
15+
loadingTemplate: '<h3 class="dt-loading">Loading...</h3>',
1516
bootstrapOptions: {},
17+
setLoadingTemplate: setLoadingTemplate,
1618
setLanguageSource: setLanguageSource,
1719
setLanguage: setLanguage,
1820
setDisplayLength: setDisplayLength,
@@ -21,6 +23,16 @@ function dtDefaultOptions() {
2123

2224
return options;
2325

26+
/**
27+
* Set the default loading template
28+
* @param loadingTemplate the HTML to display when loading the table
29+
* @returns {DTDefaultOptions} the default option config
30+
*/
31+
function setLoadingTemplate(loadingTemplate) {
32+
options.loadingTemplate = loadingTemplate;
33+
return options;
34+
}
35+
2436
/**
2537
* Set the default language source for all datatables
2638
* @param sLanguageSource the language source

‎src/angular-datatables.renderer.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ function dtRendererService(DTLoadingTemplate) {
2222
};
2323
return rendererService;
2424

25-
function showLoading($elem) {
26-
var $loading = angular.element(DTLoadingTemplate.html);
25+
function showLoading($elem, $scope) {
26+
var $loading = angular.element(DTLoadingTemplate.compileHtml($scope));
2727
$elem.after($loading);
2828
$elem.hide();
2929
$loading.show();
@@ -98,6 +98,7 @@ function dtDefaultRenderer($q, DTRenderer, DTRendererService, DTInstanceFactory)
9898
function create(options) {
9999
var _oTable;
100100
var _$elem;
101+
var _$scope;
101102
var renderer = Object.create(DTRenderer);
102103
renderer.name = 'DTDefaultRenderer';
103104
renderer.options = options;
@@ -106,8 +107,9 @@ function dtDefaultRenderer($q, DTRenderer, DTRendererService, DTInstanceFactory)
106107
renderer.changeData = changeData;
107108
renderer.rerender = rerender;
108109

109-
function render($elem) {
110+
function render($elem, $scope) {
110111
_$elem = $elem;
112+
_$scope = $scope;
111113
var dtInstance = DTInstanceFactory.newDTInstance(renderer);
112114
var result = DTRendererService.hideLoadingAndRenderDataTable($elem, renderer.options);
113115
_oTable = result.DataTable;
@@ -125,7 +127,7 @@ function dtDefaultRenderer($q, DTRenderer, DTRendererService, DTInstanceFactory)
125127

126128
function rerender() {
127129
_oTable.destroy();
128-
DTRendererService.showLoading(_$elem);
130+
DTRendererService.showLoading(_$elem, _$scope);
129131
render(_$elem);
130132
}
131133
return renderer;
@@ -204,7 +206,7 @@ function dtNGRenderer($log, $q, $compile, $timeout, DTRenderer, DTRendererServic
204206

205207
function rerender() {
206208
_destroyAndCompile();
207-
DTRendererService.showLoading(_$elem);
209+
DTRendererService.showLoading(_$elem, _parentScope);
208210
$timeout(function() {
209211
var result = DTRendererService.hideLoadingAndRenderDataTable(_$elem, renderer.options);
210212
_oTable = result.DataTable;
@@ -292,7 +294,7 @@ function dtPromiseRenderer($q, $timeout, $log, DTRenderer, DTRendererService, DT
292294

293295
function rerender() {
294296
_oTable.destroy();
295-
DTRendererService.showLoading(_$elem);
297+
DTRendererService.showLoading(_$elem, _$scope);
296298
render(_$elem, _$scope);
297299
}
298300

@@ -433,7 +435,7 @@ function dtAjaxRenderer($q, $timeout, DTRenderer, DTRendererService, DT_DEFAULT_
433435
options.bDestroy = true;
434436
if (_oTable) {
435437
_oTable.destroy();
436-
DTRendererService.showLoading(_$elem);
438+
DTRendererService.showLoading(_$elem, _$scope);
437439
// Empty in case of columns change
438440
$elem.empty();
439441
}

‎test/spec/angular-datatables.renderer.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ describe('datatables.renderer', function () {
3131
});
3232

3333
it('should hide the given element and show the loading', function () {
34-
DTRendererService.showLoading($elem);
34+
DTRendererService.showLoading($elem, $scope);
3535
expect($elem.after).toHaveBeenCalled();
3636
expect($elem.hide).toHaveBeenCalled();
3737
});

0 commit comments

Comments
 (0)