ngTransclude on table element inserts illegal markup

[mklew]

Issue originated from my question
https://groups.google.com/forum/#!topic/angular/eqGcOcQMAt4

On the first plnkr you see that when ngRepeat is used within table element without ngTransclude then everything works fine.

Here you can see that it works when there is no transclusion on 'mmtable' directive and ngRepeat is part of its template. Also 'mmtable' priority has been changed so that it compiles before ngRepeat.

ngTransclude inserts illegal markup inside table element. Concretely it inserts span element. Template becomes weird and ngRepeat doesn't work.

<table table="" class="table table-stripped table-bordered table-hover ng-isolate-scope ng-scope" props="props" service="service" expose-as="exposeAs" ng-transclude="">


            <!-- this for some reason does not work --><span class="ng-scope ng-binding">




    </span></table>

Kind regards to BahamutWC for pointing out that this is really bug.

[carlos-algms]

But if the first element is thead

<my-directive>
  <thead>. . . </thead>
</my-directive>

The bug still persist

[jordajm]

@carlos-algms - I was having the same issue until I realized that it wasn't actually an angular bug - the browser was just interpreting the lack of <table> tags around the <thead> and <tbody> as bad markup and handling it before Angular had a chance to render the <table> tag from the directive's template.

To fix it, you could either nest the <table> tag inside the directive element or use the directive as an attribute on the <table> tag like this: <table my-directive>