Merge branch 'matthew-sycle-dev' into dev

Author: l-lin

demo/app.js

@@ -43,7 +43,7 @@ angular.module('showcase', [
 .config(sampleConfig)
 .config(routerConfig)
 .config(translateConfig)
-.factory('DTLoadingTemplate', dtLoadingTemplate);
+.run(initDT);
 
 backToTop.init({
     theme: 'classic', // Available themes: 'classic', 'sky', 'slate'
@@ -110,8 +110,6 @@ function translateConfig($translateProvider) {
     $translateProvider.preferredLanguage('en');
 }
 
-function dtLoadingTemplate() {
-    return {
-        html: '<img src="/angular-datatables/images/loading.gif" />'
-    };
+function initDT(DTDefaultOptions) {
+    DTDefaultOptions.setLoadingTemplate('<img src="/angular-datatables/images/loading.gif" />');
 }

demo/basic/angularWayWithOptions.js

@@ -2,7 +2,7 @@
 angular.module('showcase.angularWay.withOptions', ['datatables', 'ngResource'])
 .controller('AngularWayWithOptionsCtrl', AngularWayWithOptionsCtrl);
 
-function AngularWayWithOptionsCtrl($resource, DTOptionsBuilder, DTColumnDefBuilder) {
+function AngularWayWithOptionsCtrl($scope, $resource, DTOptionsBuilder, DTColumnDefBuilder) {
     var vm = this;
     vm.persons = [];
     vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withDisplayLength(2);

demo/basic/overrideLoadingTpl.html

@@ -10,7 +10,7 @@ <h1><i class="fa fa-play"></i>&nbsp;Override <code>Loading</code> template</h1>
             <li>
                 One comes from this module. It is displayed before the table is rendered. This loading has been added because
                 angular-datables offers the possibility to fetch the data and options with promises. So before rendering the
-                table, the promises need to be resoved, thus adding a loading message to let users know that something is
+                table, the promises need to be resolved, thus adding a loading message to let users know that something is
                 processing.
             </li>
             <li>
@@ -22,17 +22,20 @@ <h1><i class="fa fa-play"></i>&nbsp;Override <code>Loading</code> template</h1>
             When loading data, the angular module will display by default <code>&lt;h3 class="dt-loading"&gt;Loading...&lt;/h3&gt;</code>.
         </p>
         <p>
-            You can make your own custom loading html by override the <code>DTLoadingTemplate</code> like this:
+            You can make your own custom loading html by calling the method <code>DTDefaultOptions.setLoadingTemplate()</code> like this:
         </p>
+        <div class="alert alert-info">
+            <p>
+                Angular-datatables is using the angular service <code>$compile</code>. So you can use angular directives if you want.
+            </p>
+        </div>
     </section>
     <section class="showcase no-tab">
 <div hljs>
 angular.module('showcase', ['datatables']).
-factory('DTLoadingTemplate', dtLoadingTemplate);
-function dtLoadingTemplate() {
-    return {
-        html: '<img src="images/loading.gif" />'
-    };
+run(initDT);
+function initDT(DTDefaultOptions) {
+    DTDefaultOptions.setLoadingTemplate('<img src="images/loading.gif" />');
 }
 </div>
     </section>

dist/angular-datatables.js

@@ -47,7 +47,7 @@ function dataTable($q, $http, DTRendererFactory, DTRendererService, DTPropertyUt
             angular.forEach(['dtColumns', 'dtColumnDefs', 'dtOptions'], function(tableDefField) {
                 $scope[watchFunction].call($scope, tableDefField, handleChanges, true);
             });
-            DTRendererService.showLoading($elem);
+            DTRendererService.showLoading($elem, $scope);
             ctrl.render($elem, ctrl.buildOptionsPromise(), _staticHTML);
         };
     }
@@ -411,11 +411,14 @@ function dtColumnDefBuilder(DTColumnBuilder) {
 }
 dtColumnDefBuilder.$inject = ['DTColumnBuilder'];
 
-function dtLoadingTemplate() {
+function dtLoadingTemplate($compile, DTDefaultOptions) {
     return {
-        html: '<h3 class="dt-loading">Loading...</h3>'
+        compileHtml: function($scope) {
+            return $compile(angular.element(DTDefaultOptions.loadingTemplate))($scope);
+        }
     };
 }
+dtLoadingTemplate.$inject = ['$compile', 'DTDefaultOptions'];
 
 'use strict';
 
@@ -600,7 +603,9 @@ angular.module('datatables.options', [])
 
 function dtDefaultOptions() {
     var options = {
+        loadingTemplate: '<h3 class="dt-loading">Loading...</h3>',
         bootstrapOptions: {},
+        setLoadingTemplate: setLoadingTemplate,
         setLanguageSource: setLanguageSource,
         setLanguage: setLanguage,
         setDisplayLength: setDisplayLength,
@@ -609,6 +614,16 @@ function dtDefaultOptions() {
 
     return options;
 
+    /**
+     * Set the default loading template
+     * @param loadingTemplate the HTML to display when loading the table
+     * @returns {DTDefaultOptions} the default option config
+     */
+    function setLoadingTemplate(loadingTemplate) {
+        options.loadingTemplate = loadingTemplate;
+        return options;
+    }
+
     /**
      * Set the default language source for all datatables
      * @param sLanguageSource the language source
@@ -690,8 +705,8 @@ function dtRendererService(DTLoadingTemplate) {
     };
     return rendererService;
 
-    function showLoading($elem) {
-        var $loading = angular.element(DTLoadingTemplate.html);
+    function showLoading($elem, $scope) {
+        var $loading = angular.element(DTLoadingTemplate.compileHtml($scope));
         $elem.after($loading);
         $elem.hide();
         $loading.show();
@@ -767,6 +782,7 @@ function dtDefaultRenderer($q, DTRenderer, DTRendererService, DTInstanceFactory)
     function create(options) {
         var _oTable;
         var _$elem;
+        var _$scope;
         var renderer = Object.create(DTRenderer);
         renderer.name = 'DTDefaultRenderer';
         renderer.options = options;
@@ -775,8 +791,9 @@ function dtDefaultRenderer($q, DTRenderer, DTRendererService, DTInstanceFactory)
         renderer.changeData = changeData;
         renderer.rerender = rerender;
 
-        function render($elem) {
+        function render($elem, $scope) {
             _$elem = $elem;
+            _$scope = $scope;
             var dtInstance = DTInstanceFactory.newDTInstance(renderer);
             var result = DTRendererService.hideLoadingAndRenderDataTable($elem, renderer.options);
             _oTable = result.DataTable;
@@ -794,7 +811,7 @@ function dtDefaultRenderer($q, DTRenderer, DTRendererService, DTInstanceFactory)
 
         function rerender() {
             _oTable.destroy();
-            DTRendererService.showLoading(_$elem);
+            DTRendererService.showLoading(_$elem, _$scope);
             render(_$elem);
         }
         return renderer;
@@ -874,7 +891,7 @@ function dtNGRenderer($log, $q, $compile, $timeout, DTRenderer, DTRendererServic
 
         function rerender() {
             _destroyAndCompile();
-            DTRendererService.showLoading(_$elem);
+            DTRendererService.showLoading(_$elem, _parentScope);
             $timeout(function() {
                 var result = DTRendererService.hideLoadingAndRenderDataTable(_$elem, renderer.options);
                 _oTable = result.DataTable;
@@ -963,7 +980,7 @@ function dtPromiseRenderer($q, $timeout, $log, DTRenderer, DTRendererService, DT
 
         function rerender() {
             _oTable.destroy();
-            DTRendererService.showLoading(_$elem);
+            DTRendererService.showLoading(_$elem, _$scope);
             render(_$elem, _$scope);
         }
 
@@ -1105,7 +1122,7 @@ function dtAjaxRenderer($q, $timeout, DTRenderer, DTRendererService, DT_DEFAULT_
                 options.bDestroy = true;
                 if (_oTable) {
                     _oTable.destroy();
-                    DTRendererService.showLoading(_$elem);
+                    DTRendererService.showLoading(_$elem, _$scope);
                     // Empty in case of columns change
                     $elem.empty();
                 }