自定义指令未在指定的DOM位置呈现

Question

解决方案：此指令应限制为'A'（属性）而不是'E'（元素），因为它扩展了常规表行的功能

鉴于此tabel标记：

<table class="table table-bordered">
    <thead>
    <tr>
        <th ng-repeat="val in [1,2,3]">header {{val}}</th>
    </tr>
    </thead>
    <tbody>
    <row-directive ng-repeat="(row, index) in [1,2,3]" row-index="{{$index}}"></row-directive>
    </tbody>
</table>

和这个指令：

angular.module('gguiApp').directive('rowDirective', function () {
return {
    restrict: 'E',
    replace: false,
    scope:{
      rowIndex : '@'
    },
    template: '<tr><td ng-repeat="x in [1,2,3]"> cell {{x}} of row {{rowIndex}}</tr>'
};
});

我希望tbody充满了我的自定义指令生成的元素。这不会发生。

我得到的结果是：

这不是我想要的。为什么我的指令没有在预期位置呈现？

附录：

渲染表的来源：

<div class="container">
<!-- ngRepeat: (row, index) in [1,2,3] --><row-directive ng-repeat="(row, index) in [1,2,3]" row-index="0" class="ng-scope ng-isolate-scope"><tr><!-- ngRepeat: x in [1,2,3] --><td ng-repeat="x in [1,2,3]" class="ng-binding ng-scope"> cell 1 of row 0</td><!-- end ngRepeat: x in [1,2,3] --><td ng-repeat="x in [1,2,3]" class="ng-binding ng-scope"> cell 2 of row 0</td><!-- end ngRepeat: x in [1,2,3] --><td ng-repeat="x in [1,2,3]" class="ng-binding ng-scope"> cell 3 of row 0</td><!-- end ngRepeat: x in [1,2,3] --></tr></row-directive><!-- end ngRepeat: (row, index) in [1,2,3] --><row-directive ng-repeat="(row, index) in [1,2,3]" row-index="1" class="ng-scope ng-isolate-scope"><tr><!-- ngRepeat: x in [1,2,3] --><td ng-repeat="x in [1,2,3]" class="ng-binding ng-scope"> cell 1 of row 1</td><!-- end ngRepeat: x in [1,2,3] --><td ng-repeat="x in [1,2,3]" class="ng-binding ng-scope"> cell 2 of row 1</td><!-- end ngRepeat: x in [1,2,3] --><td ng-repeat="x in [1,2,3]" class="ng-binding ng-scope"> cell 3 of row 1</td><!-- end ngRepeat: x in [1,2,3] --></tr></row-directive><!-- end ngRepeat: (row, index) in [1,2,3] --><row-directive ng-repeat="(row, index) in [1,2,3]" row-index="2" class="ng-scope ng-isolate-scope"><tr><!-- ngRepeat: x in [1,2,3] --><td ng-repeat="x in [1,2,3]" class="ng-binding ng-scope"> cell 1 of row 2</td><!-- end ngRepeat: x in [1,2,3] --><td ng-repeat="x in [1,2,3]" class="ng-binding ng-scope"> cell 2 of row 2</td><!-- end ngRepeat: x in [1,2,3] --><td ng-repeat="x in [1,2,3]" class="ng-binding ng-scope"> cell 3 of row 2</td><!-- end ngRepeat: x in [1,2,3] --></tr></row-directive><!-- end ngRepeat: (row, index) in [1,2,3] --><table class="table table-bordered">
    <thead>
    <tr>
        <!-- ngRepeat: val in [1,2,3] --><th ng-repeat="val in [1,2,3]" class="ng-binding ng-scope">header 1</th><!-- end ngRepeat: val in [1,2,3] --><th ng-repeat="val in [1,2,3]" class="ng-binding ng-scope">header 2</th><!-- end ngRepeat: val in [1,2,3] --><th ng-repeat="val in [1,2,3]" class="ng-binding ng-scope">header 3</th><!-- end ngRepeat: val in [1,2,3] -->
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<!--<div ui-view="loginView"></div>-->
<!--<div ui-view="appView"></div>-->

Answer 1

尝试使用属性指令，因为根据我对这篇文章的理解：https://github.com/angular/angular.js/issues/1459，浏览器会在解析页面时将自定义元素指令移到表外。

<tbody>
<tr row-directive ng-repeat="(row, index) in [1,2,3]" row-index="{{$index}}"></tr>
</tbody>

指令：

angular.module('gguiApp').directive('rowDirective', function () {
return {
    restrict: 'AE',
    scope:{
      rowIndex : '@'
    },
    template: '<td ng-repeat="x in [1,2,3]"> cell {{x}} of row {{rowIndex}}</td>'
};
});

FIDDLE