fix(directive): support ng-repeat on th's

Closes #12

Author: awerlang

README.md

@@ -30,7 +30,8 @@ All this work is based on the following assumptions:
 * Angular native implementation compatible with 1.3.4+;
 * Keep things DRY;
 * Supports static and dynamic (ng-repeat) rows;
-* Support conditionally shown (ng-if) columns;
+* Supports conditionally shown (ng-if) columns;
+* Supports dynamic headers (ng-repeat);
 * Easy to apply any style on top of it;
 * Works with any base CSS framework; 
 * Should integrate seamlessly with any table component you might choose to use.
@@ -107,8 +108,7 @@ It's possible to override a header with a `data-title` attribute:
     <tr>
         <td data-title="column 1">tom</td>
         <td data-title="column 2">jerry</td>
-    </tr> 
-
+    </tr>
 
 ### Column can be shown/hidden with ng-if
 
@@ -117,7 +117,12 @@ Also, more than one `td` exist for a single `th`...to deal with this add a `resp
     <tr>
         <td ng-if="condition" responsive-dynamic>tom</td>
         <td ng-if="!condition" responsive-dynamic>jerry</td>
-    </tr> 
+    </tr>
+
+### Changes to header text doesn't reflect in responsive mode
+
+This is by design. To avoid expensive digest cycles only the content from the first digest cycle is used. 
+There are no watches being setup.
 
 ### IE9 responsive hack
 

src/directive.js

@@ -14,7 +14,7 @@ function updateTitle(td, th) {
 function colspan(td) {
     var colspan = td.getAttributeNode('colspan');
     return colspan ? parseInt(colspan.value) : 1;
-} 
+}
 
 function wtResponsiveTable() {
     return {
@@ -25,7 +25,7 @@ function wtResponsiveTable() {
                     var headers = getHeaders($element[0]);
                     if (headers.length) {
                         var row = td.parentElement;
-                        var headerIndex = 0; 
+                        var headerIndex = 0;
                         var found = Array.prototype.some.call(row.querySelectorAll('td'), function (value, index) {
                             if (value === td) {
                                 return true;
@@ -40,21 +40,33 @@ function wtResponsiveTable() {
             }
         },
         compile: function (element, attrs) {
-            attrs.$addClass('responsive');
-            var headers = getHeaders(element[0]);
-            if (headers.length) {
-                var rows = element[0].querySelectorAll('tbody > tr');
-                Array.prototype.forEach.call(rows, function(row) {
-                    var headerIndex = 0; 
-                    Array.prototype.forEach.call(row.querySelectorAll('td'), function (value, index) {
-                        if (!value.getAttributeNode('responsive-dynamic')) {
-                            var th = value.parentElement.querySelector('th') || headers.item(headerIndex);
-                            updateTitle(value, th); 
-                        }
+            function apply() {
+                var headers = getHeaders(element[0]);
+                if (headers.length) {
+                    var rows = element[0].querySelectorAll('tbody > tr');
+                    Array.prototype.forEach.call(rows, function(row) {
+                        var headerIndex = 0;
+                        Array.prototype.forEach.call(row.querySelectorAll('td'), function (value, index) {
+                            if (!value.getAttributeNode('responsive-dynamic')) {
+                                var th = value.parentElement.querySelector('th') || headers.item(headerIndex);
+                                updateTitle(value, th);
+                            }
 
-                        headerIndex += colspan(value);
+                            headerIndex += colspan(value);
+                        });
                     });
-                });
+                }
+            }
+
+            attrs.$addClass('responsive');
+            if (Array.prototype.some.call(element.find('th'), function (it) {
+                return it.getAttributeNode('ng-repeat') || it.getAttributeNode('data-ng-repeat')
+            })) {
+                setTimeout(function () {
+                    apply();
+                }, 0);
+            } else {
+                apply();
             }
         }
     };
@@ -66,8 +78,8 @@ function wtResponsiveDynamic() {
         require: '^^wtResponsiveTable',
         link: function (scope, element, attrs, tableCtrl) {
             var td = element[0];
-            var th = tableCtrl.getHeader(td); 
+            var th = tableCtrl.getHeader(td);
             updateTitle(td, th);
         }
     };
-}
+}

tests/directive.spec.js

@@ -233,6 +233,41 @@ describe('directive', function () {
 		expect(firstDataRow.eq(3).attr('data-title')).toBe('Forth title');
 	});
 
+	it('supports ng-repeat applied on TH', function (done) {
+		var markup = [
+		    '<table wt-responsive-table>',
+		    '    <thead>',
+		    '        <tr>',
+		    '            <th ng-repeat="header in headers">{{header}}</th>',
+		    '        </tr>',
+		    '    </thead>',
+		    '    <tbody>',
+		    '        <tr>',
+		    '            <td>Column 1 - Content</td>',
+		    '            <td>Column 2 - Content</td>',
+		    '        </tr>',
+		    '    </tbody>',
+		    '</table>'
+		].join('');
+		var element = angular.element(markup);
+		var scope = $rootScope.$new();
+		scope.headers = ['Column 1', 'Column 2'];
+
+		$compile(element)(scope);
+		scope.$digest();
+
+		var firstDataRow = element.find('tbody tr:first td');
+
+		setTimeout(() => {
+			expect(firstDataRow.eq(0).attr('data-title')).toBe('Column 1');
+			expect(firstDataRow.eq(0).text()).toBe('Column 1 - Content');
+			expect(firstDataRow.eq(1).attr('data-title')).toBe('Column 2');
+			expect(firstDataRow.eq(1).text()).toBe('Column 2 - Content');
+
+			done();
+		}, 0);
+	});
+
 	it('supports ng-if applied on TD with data-title', function () {
 		var markup = [
 		    '<table wt-responsive-table>',