AngularJS 嵌套指令被插入到其假定的父元素之外

我无法理解嵌套指令如何与 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
    };
});

有人可以向我解释为什么tr显示在外部tbody？ 我只想做的是将行指令嵌套在表指令中。我很确定我错过了ng-transclude某处但在哪里？我查过angular-bootstrap他们似乎玩了一下compile功能。任何帮助深表感谢。

看到这个对应的plunker http://plnkr.co/edit/OeKEdH3GtHS9WTMcfpEF?p=preview.

问题与table-标签。浏览器重新排列 htmlmyTableAngularJS 渲染模板之前。发生这种情况是因为 html 无效。

要解决此问题，您可以更改限制属性myRow-指令'A'并使用这样的指令：

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

这样浏览器就会看到有效的 html，并且它会像它应该的那样工作。

这里是固定的plunkr http://plnkr.co/edit/DUZVzKoZ2y8yCM0vAPJu?p=preview.