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

Question

解决方案:该指令应限制为“A”(属性)而不是“E”(元素)，因为它扩展了常规表格行的功能

鉴于此表格标记:

<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