AngularJS nested directives are inserted outside their supposed parent element

Question

I'm having trouble understanding how nested directives work with AngularJS.

var app = angular.module('plunker', []);

app.directive('myTable', function() {
    return {
        restrict: 'E',
        template: [
            '<table class="table table-query" ng-show="queries.length">',
                '<thead>',
                    '<tr>',
                        '<th class="query-name">Name</th>',
                        '<th class="query-status">Status</th>',
                    '</tr>',
                '</thead>',
                '<tbody>',
                    '<my-row ng-repeat="query in queries track by $index"',
                             'query="query">',
                    '</my-row>',
                '</tbody>',
            '</table>',
        ].join(''),
        scope: {
            queries: '='
        },
        controller: function() {
        },
        link: function(scope, element) {
        }
    };
});

app.directive('myRow', function() {
    return {
        restrict: 'E',
        template: [
            '<tr class="query query-status-{{query.status}}">',
                '<td>{{ query.name }}</td>',
                '<td>{{ query.status | uppercase }}</td>',
            '</tr>',
        ].join(''),
        scope: {
            query: '='
        },
        replace: true
    };
});

Can someone explain to me why the tr are diplayed outside the tbody? What I simply want to do is nest a row directive inside a table directive. I'm pretty sure I'm missing a ng-transclude somewhere but where? I've checked angular-bootstrap and they seem to play a bit with compile function. Any help is much appreciated.

See this corresponding plunkr.

Answer 1

The problem has to do with the table-tag. The browser rearranges the html of the myTable template before angularjs renders it. This is happening because the html is not valid.

To solve this issue you can change the restrict property of the myRow-directive to 'A' and use the directive like this:

...
'<tbody>',
    '<tr my-row ng-repeat="query in queries track by $index"',
        'query="query">',
    '</tr>',
'</tbody>',
...

This way the browser sees valid html and it works like it should be.

Here is the fixed plunkr.