fix($compile): support templates with thead and tfoot root elements

If the first element in a template is a <thead> or a <tfoot>, then use the existing logic to handle table elements compilation. Closes angular#6289
lgalfaso · Feb 17, 2014 · 4154064 · 4154064
1 parent 47ec6f5
commit 4154064
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/src/ng/compile.js b/src/ng/compile.js
@@ -503,7 +503,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
       Suffix = 'Directive',
       COMMENT_DIRECTIVE_REGEXP = /^\s*directive\:\s*([\d\w\-_]+)\s+(.*)$/,
       CLASS_DIRECTIVE_REGEXP = /(([\d\w\-_]+)(?:\:([^;]+))?;?)/,
-      TABLE_CONTENT_REGEXP = /^<\s*(tr|th|td|tbody)(\s+[^>]*)?>/i;
+      TABLE_CONTENT_REGEXP = /^<\s*(tr|th|td|thead|tbody|tfoot)(\s+[^>]*)?>/i;
 
   // Ref: http://developers.whatwg.org/webappapis.html#event-handler-idl-attributes
   // The assumption is that future DOM event attribute names will begin with
@@ -1651,8 +1651,8 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
         type = type[1].toLowerCase();
         var table = jqLite('<table>' + template + '</table>'),
             tbody = table.children('tbody'),
-            leaf = /(td|th)/.test(type) && table.find('tr');
-        if (tbody.length && type !== 'tbody') {
+            leaf = /(td|th)$/.test(type) && table.find('tr');
+        if (tbody.length && !/(thead|tbody|tfoot)/.test(type)) {
           table = tbody;
         }
         if (leaf && leaf.length) {

diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
@@ -529,10 +529,18 @@ describe('$compile', function() {
             replace: true,
             template: '<th>TH</th>'
           }));
+          directive('replaceWithThead', valueFn({
+            replace: true,
+            template: '<thead><tr><td>TD</td></tr></thead>'
+          }));
           directive('replaceWithTbody', valueFn({
             replace: true,
             template: '<tbody><tr><td>TD</td></tr></tbody>'
           }));
+          directive('replaceWithTfoot', valueFn({
+            replace: true,
+            template: '<tfoot><tr><td>TD</td></tr></tfoot>'
+          }));
         }));
 
 
@@ -718,12 +726,26 @@ describe('$compile', function() {
           expect(nodeName_(element)).toMatch(/th/i);
         }));
 
+        it('should support templates with root <thead> tags', inject(function($compile, $rootScope) {
+          expect(function() {
+            element = $compile('<div replace-with-thead></div>')($rootScope);
+          }).not.toThrow();
+          expect(nodeName_(element)).toMatch(/thead/i);
+        }));
+
         it('should support templates with root <tbody> tags', inject(function($compile, $rootScope) {
           expect(function() {
             element = $compile('<div replace-with-tbody></div>')($rootScope);
           }).not.toThrow();
           expect(nodeName_(element)).toMatch(/tbody/i);
         }));
+
+        it('should support templates with root <tfoot> tags', inject(function($compile, $rootScope) {
+          expect(function() {
+            element = $compile('<div replace-with-tfoot></div>')($rootScope);
+          }).not.toThrow();
+          expect(nodeName_(element)).toMatch(/tfoot/i);
+        }));
       });