Ng-transclude not working with table element

I am trying to build a directive for a table to display data.

The table has a header and a body.

Ideally I would like to have the following directives:

<div my-table></div>
<div my-table-header></div>
<div my-table-body></div>

So that I can use them with ng-transclude

<div my-table>
    <div my-table-header></div>
    <div my-table-body></div>
</div>

However, this does not work with the following template for my-table:

<table class="table" ng-transclude></table>

When the page renders, I end up with the following:

<div my-table="" class="ng-scope">



            1
            2




            a
            b



        </div>

I have seen some mention of ng-transclude not working well with tables. For example, if you put

<table><div ng-transclude></div></table>

the browser moves the ng-transclude div outside of the table

I was wondering if anyone had any experience solving this problem, as it seems like a fairly reasonable thing to want to do.

Cheers!

Solution

This is not the only solution (I hope). However, the only way I have found to make this work is to make the tempate for my-table be

<tbody ng-transclude>
</tbody>

And then in the markup to specify the directive as an attribute on a table

<table my-table>
    <my-table-header></my-table-header>
    <my-table-body></my-table-body>
</table>

This is the only form I have been able to make this work in.

Wrapping the my-table template in a table element

<table>
    <tbody ng-transclude></tbody>
</table>

or putting ng-transclude on the table itself

<table ng-transclude></table>

and then instantiating it as an attribute on a div or as an element does not work at all

<div my-table></div>
<my-table></mytable>

tl;dr

This solution works but I do not like it for the following reasons: