Correct the empty result display in the "Angular way" #43

l-lin · Aug 21, 2014 · 266314a · 266314a
1 parent e0773db
commit 266314a
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 26 deletions.
diff --git a/dist/angular-datatables.js b/dist/angular-datatables.js
@@ -359,12 +359,16 @@
 }(angular));
 (function (angular) {
   'use strict';
-  angular.module('datatables.directive', ['datatables.options']).directive('datatable', [
+  angular.module('datatables.directive', [
+    'datatables.options',
+    'datatables.util'
+  ]).directive('datatable', [
     'DT_DEFAULT_OPTIONS',
     '$timeout',
     '$DTBootstrap',
     'DTLoadingTemplate',
-    function (DT_DEFAULT_OPTIONS, $timeout, $DTBootstrap, DTLoadingTemplate) {
+    '$DTPropertyUtil',
+    function (DT_DEFAULT_OPTIONS, $timeout, $DTBootstrap, DTLoadingTemplate, $DTPropertyUtil) {
       var $loading = angular.element(DTLoadingTemplate.html), _showLoading = function ($elem) {
           $elem.after($loading);
           $elem.hide();
@@ -434,7 +438,10 @@
         return {
           options: options,
           render: function ($scope, $elem) {
-            var _this = this;
+            var _this = this, parentScope = $scope.$parent, dataProp = $DTPropertyUtil.findDataPropFromScope(parentScope);
+            if (parentScope[dataProp].length === 0) {
+              _doRenderDataTable($elem, _this.options, $scope);
+            }
             $scope.$on(DT_DEFAULT_OPTIONS.lastRowKey, function () {
               _doRenderDataTable($elem, _this.options, $scope);
             });
@@ -991,6 +998,14 @@
           result = angular.copy(target);
         }
         return result;
+      },
+      findDataPropFromScope: function (scope) {
+        for (var prop in scope) {
+          if (prop.indexOf('$', 0) !== 0 && scope.hasOwnProperty(prop) && angular.isArray(scope[prop])) {
+            return prop;
+          }
+        }
+        throw new Error('Cannot find the data property from the scope');
       }
     };
   });

diff --git a/dist/angular-datatables.min.js b/dist/angular-datatables.min.js
diff --git a/src/angular-datatables.directive.js b/src/angular-datatables.directive.js
@@ -1,8 +1,8 @@
 (function(angular) {
     'use strict';
 
-    angular.module('datatables.directive', ['datatables.options']).
-    directive('datatable', function(DT_DEFAULT_OPTIONS, $timeout, $DTBootstrap, DTLoadingTemplate) {
+    angular.module('datatables.directive', ['datatables.options', 'datatables.util']).
+    directive('datatable', function(DT_DEFAULT_OPTIONS, $timeout, $DTBootstrap, DTLoadingTemplate, $DTPropertyUtil) {
         var $loading = angular.element(DTLoadingTemplate.html),
             _showLoading = function ($elem) {
                 $elem.after($loading);
@@ -79,7 +79,12 @@
             return {
                 options: options,
                 render: function ($scope, $elem) {
-                    var _this = this;
+                    var _this = this,
+                        parentScope = $scope.$parent,
+                        dataProp = $DTPropertyUtil.findDataPropFromScope(parentScope);
+                    if (parentScope[dataProp].length === 0) {
+                        _doRenderDataTable($elem, _this.options, $scope);
+                    }
                     $scope.$on(DT_DEFAULT_OPTIONS.lastRowKey, function () {
                         _doRenderDataTable($elem, _this.options, $scope);
                     });

diff --git a/src/angular-datatables.util.js b/src/angular-datatables.util.js
@@ -15,7 +15,7 @@
                 if (angular.isUndefined(result) || result === null) {
                     result = {};
                 }
-                if (angular.isUndefined(target) || target ===  null) {
+                if (angular.isUndefined(target) || target === null) {
                     return result;
                 }
                 if (angular.isObject(target)) {
@@ -28,6 +28,20 @@
                     result = angular.copy(target);
                 }
                 return result;
+            },
+            /**
+             * Find the first array data property from the given scope.
+             * It
+             * @param scope the scope
+             * @returns {string} the property
+             */
+            findDataPropFromScope: function (scope) {
+                for (var prop in scope) {
+                    if (prop.indexOf('$', 0) !== 0 && scope.hasOwnProperty(prop) && angular.isArray(scope[prop])) {
+                        return prop;
+                    }
+                }
+                throw new Error('Cannot find the data property from the scope');
             }
         };
     });

diff --git a/test/spec/angular-datatables.util.spec.js b/test/spec/angular-datatables.util.spec.js
@@ -28,27 +28,41 @@ describe('datatables.service', function () {
             $DTPropertyUtil = $injector.get('$DTPropertyUtil');
         }));
 
-        it('should overrides the properties', function () {
-            var result = $DTPropertyUtil.overrideProperties(source, target);
-            expect(result).not.toBeNull();
-            expect(result).toEqual({
-                a: 'ta',
-                b: 'b',
-                c: {
-                    c1: 'tc1',
-                    c2: 'c2'
-                },
-                d: 'td',
-                e: {
-                    e1: 'te1',
-                    e2: 'te2'
-                }
+        describe(', when overriding the properties,', function () {
+            it('should overrides the properties', function () {
+                var result = $DTPropertyUtil.overrideProperties(source, target);
+                expect(result).not.toBeNull();
+                expect(result).toEqual({
+                    a: 'ta',
+                    b: 'b',
+                    c: {
+                        c1: 'tc1',
+                        c2: 'c2'
+                    },
+                    d: 'td',
+                    e: {
+                        e1: 'te1',
+                        e2: 'te2'
+                    }
+                });
+            });
+
+            it('should return the source if the target is null or undefined', function () {
+                expect($DTPropertyUtil.overrideProperties(source)).toEqual(source);
+                expect($DTPropertyUtil.overrideProperties(source, null)).toEqual(source);
             });
         });
 
-        it('should return the source if the target is null or undefined', function () {
-            expect($DTPropertyUtil.overrideProperties(source)).toEqual(source);
-            expect($DTPropertyUtil.overrideProperties(source, null)).toEqual(source);
+        describe(', when fetching the data array from the scope,', function () {
+            it('should fetch the correct data array', inject(function ($rootScope) {
+                var scope = $rootScope.$new();
+                scope.persons = ['foo', 'bar'];
+                expect($DTPropertyUtil.findDataPropFromScope(scope)).toBe('persons');
+            }));
+            it('should throw an error if the scope does not contain any array', inject(function ($rootScope) {
+                var scope = $rootScope.$new();
+                expect(function() {$DTPropertyUtil.findDataPropFromScope(scope);}).toThrow(new Error('Cannot find the data property from the scope'));
+            }));
         });
     });
 });