Javascript 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
    };
});

var-app=angular.module（'plunker'，[]）；
app.directive（'myTable'，function（）{
返回{
限制：'E'，
模板：[
'',
'',
'',
“姓名”，
"地位",，
'',
'',
'',
'',
'',
'',
'',
].加入（“”），
范围：{
查询：'='
},
控制器：函数（）{
},
链接：功能（范围、元素）{
}
};
});
app.directive（'myRow'，function（）{
返回{
限制：'E'，
模板：[
'',
“{query.name}}”，
“{query.status |大写}}”，
'',
].加入（“”），
范围：{
查询：'='
},
替换：正确
};
});

有人能给我解释一下为什么

tr

显示在

tbody

之外吗？ 我只想在table指令中嵌套一个row指令。我很确定我在什么地方丢失了一个

ng transclude

，但在哪里？我检查了

angular bootstrap

，它们似乎在使用

compile

函数。非常感谢您的帮助

---

.

问题与

表

-tag有关。在angularjs呈现模板之前，浏览器会重新排列

myTable

模板的html。发生这种情况是因为html无效

要解决此问题，您可以将

myRow

-指令的restrict属性更改为

'A'

，并使用如下指令：

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

。。。
'',
'',
'',
'',
...

通过这种方式，浏览器可以看到有效的html，并且可以正常工作

---

这是固定的

太棒了！谢谢你，弗里迪。