fix($compile): properly handle directive replace for table elements

[pelme]

To work around limitations in jqLite, the template snippet is wrapped in
a

element. This does not work for table elements, since they
cannot be constructed inside a div. This patch takes special to properly
wrap caption, thead, tbody, tfoot, tr, th and td in tags that allow them
to be created.

Closes #1459

[pburgmer]

+1

[mabuzer]

+1

[ricardo37]

+1

[bashmish]

+1

[mhallin79]

+1

[migajek]

I've recklessly started learning directives from writing the one for table manipularing, and had no idea what was doing wrong until found out things work properly when I replace tr/ths with divs or anything else.

[btford]

If this works in jQuery, perhaps it would be better to improve jqLite. @IgorMinar what do you think of this?

[pelme]

This is more of a browser thing, jQuery('<div><tr></tr></div>') does not work either.

It might be possible to do away with the div-wrapping altogether by improving jqLite, though.

[migajek]

@pelme why would one need to wrap table-only element with div? jQuery('<div><tr></tr></div>') doesn't work, but $('<tr></tr>') does - yet Angular doesn't let me replace <tr my-directive> with another <tr> from template ... so how is it related?

[btford]

Punting this to 1.2.1 for now. Will follow with details (spoiler: it's complicated).

[migajek]

Is there any workaround/dirty fix for that? Or should we just avoid table-related directives until 1.2.1 ?

[IgorMinar]

the problem here is that angular needs to create fragments of dom and the easiest way to do so is via innerHTML. with innerHTML howerver, you need a container to innerHTML the string template into and we use <div> element for that. But because of certain html rules you can't innerHTML certain elements to certain other elements. This is the case with <div> and <tr>. jQuery uses quite a bit of code to overcome this via heuristics, I'm not keen on doing something along those lines in jqLite.

Even if we did, there is still issue with multi-root templates <tr>1</tr><tr>2</tr> which we need to create within some container and as I wrote before, determining what this container should be is tricky.

[migajek]

Summing up, will this one be kind of wontfix answer? I have seen quite a few table related directives and all of them uses some tricks for overcoming this problem.

[migajek]

Btw, @IgorMinar if auto-detecting what wrapping tag should be used, how about letting the developer decide? Just add the "templateWrapper" property which defaults to '

', yet the developer could provide other (like table or thead)?

[migajek]

• defaults do div tag...

[KendallPark]

+1

[marcorinck]

+1

[ooflorent]

@btford:
If this works in jQuery, perhaps it would be better to improve jqLite.

I included jQuery 2.0 before angular (so jqLite is replaced by jQuery) and the problem is still there.
This seems to be specific to angular...

[migajek]

any chances to get this one fixed?

[dalcib]

+1

[caitp]

I didn't realize someone else had a patch for this. I think this is okay, but it's possible to move this into a closure so that in the future it might be extended to support other content types (like SVG content, for example). Also, the 'indexOf' strategy could potentially be problematic, as it is very strict --- I think a regexp is probably a nicer way to do this, in terms of being forgiving. My implementation is at #5235