решена: Угловая: настраиваемая директива не отображается в указанном месте 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, браузер будет перемещать пользовательские директива element вне таблицы при разборе страницы.

<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