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
mkuehn · Mar 7, 2014 · 53ec5e1 · 53ec5e1
1 parent 235731d
commit 53ec5e1
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 9 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
@@ -1649,16 1649,15 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
  template = trim(template);
  if ((type = TABLE_CONTENT_REGEXP.exec(template))) {
  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') {
- table = tbody;
  var table = jqLite('<table>'   template   '</table>');
  if (/(thead|tbody|tfoot)/.test(type)) {
  return table.children(type);
  }
- if (leaf && leaf.length) {
- table = leaf;
  table = table.children('tbody');
  if (type === 'tr') {
  return table.children('tr');
  }
- return table.contents();
  return table.children('tr').contents();
  }
  return jqLite('<div>'  
  template  

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);
  }));
  });
 
 
@@ -833,10 855,18 @@ describe('$compile', function() {
  replace: true,
  templateUrl: 'th.html'
  }));
  directive('replaceWithThead', valueFn({
  replace: true,
  templateUrl: 'thead.html'
  }));
  directive('replaceWithTbody', valueFn({
  replace: true,
  templateUrl: 'tbody.html'
  }));
  directive('replaceWithTfoot', valueFn({
  replace: true,
  templateUrl: 'tfoot.html'
  }));
  }
  ));
 
@@ -1500,6 1530,15 @@ describe('$compile', function() {
  expect(nodeName_(element)).toMatch(/th/i);
  }));
 
  it('should support templates with root <thead> tags', inject(function($compile, $rootScope, $templateCache) {
  $templateCache.put('thead.html', '<thead><tr><td>TD</td></tr></thead>');
  expect(function() {
  element = $compile('<div replace-with-thead></div>')($rootScope);
  }).not.toThrow();
  $rootScope.$digest();
  expect(nodeName_(element)).toMatch(/thead/i);
  }));
 
  it('should support templates with root <tbody> tags', inject(function($compile, $rootScope, $templateCache) {
  $templateCache.put('tbody.html', '<tbody><tr><td>TD</td></tr></tbody>');
  expect(function() {
@@ -1508,6 1547,15 @@ describe('$compile', function() {
  $rootScope.$digest();
  expect(nodeName_(element)).toMatch(/tbody/i);
  }));
 
  it('should support templates with root <tfoot> tags', inject(function($compile, $rootScope, $templateCache) {
  $templateCache.put('tfoot.html', '<tfoot><tr><td>TD</td></tr></tfoot>');
  expect(function() {
  element = $compile('<div replace-with-tfoot></div>')($rootScope);
  }).not.toThrow();
  $rootScope.$digest();
  expect(nodeName_(element)).toMatch(/tfoot/i);
  }));
  });