Angular table row directive not rendering inside table

Answer 1

The previous answers are correct, but I found them a bit hard to understand/apply, so summarized how I solved it with their help:

The table

<tbody>
    <tr isrcrow ng-repeat="..."></tr>
</tbody>

The isrcow directive template (without tr, no single root)

<td></td>
<td></td>
...

The isrcrow directive with

restrict: 'A'
replace: false

The end results is

<tbody>
     <tr isrcrow>
         <td></td>
         <td></td>
         ...
     </tr>
     <tr isrcrow>
         <td></td>
         <td></td>
         ...
     </tr>
     ...
</tbody>

Answer 2

Adding a summary of my comments as an answer since it appeared to have helped the OP. :-)

As GregL points out, omitting replace: true in a directive with restrict: 'E' and <tr> as the root template node will result in invalid markup, giving rise to the incorrect rendering of the row.

However, for those using a version of Angular prior to 1.2.13 (romantic-transclusion), this solution will not be applicable due to an issue that has been noted.

A work around would be to instead to use the directive as an attribute (i.e. restrict: 'A') and appropriately modify the template such that <tr> is no longer the root template node. This will allow replace: true to be used.

Answer 3

I would guess that this is because you have not specified replace: true for the isrcrow directive. As a result, the final markup would look like:

<isrcrow>
    <tr>
        <td>...</td>
        ...
        <td>...</td>
    </tr>
</isrcrow>

Which will be a direct child of a <tbody>, which is invalid markup. As a result, most modern browsers (e.g. Chrome, and also Firefox, I believe) will try to "fix" your markup to be valid by moving the <isrcrow> tag outside of the table.

Instead, if you add replace: true to your directive specification, the <isrcrow> element won't be rendered, and the browser should see only valid markup and not try to "fix" it.