Angular append template template to table

Question

У меня возникла ситуация, когда мне нужно повторить несколько тел в одной таблице, что я пытаюсь сделать, это сделать каждую директиву tbody, и я хочу, чтобы ее шаблон добавлялся к таблице, но когда im поставил директиву внутри тега table его содержимое помещается вне таблицы.

директива корзину Жеребьевка:

return { 
    restrict : 'AE', 
    templateUrl: 'client/cart/views/cart-draw.html', 
    scope  : {}, 
    replace: true, 
    controller : controller 
    } 

ЛТФ:

<tbody ng-repeat="draw in CartService.items.draws track by $index"> 

    <tr> 
    <td> 
     //some content 
    </td> 
    </tr> 
</tbody> 

HTML-:

<table class="table"> 

    <cart-draw></cart-draw> 

</table> 

вот plunker, если вы проверяете элемент вы увидите TBODY не входит в стоимость: http://plnkr.co/edit/9wEGFE5K0w0ayp6qo8Lx?p=preview

Answer 1

Это происходит потому, что тег <table> не распознает ваш пользовательский элемент <cart-draw> как действительный ребенок.

Я хотел бы изменить так: http://plnkr.co/edit/u88N76h5dvLAvR3C1kRs?p=preview

index.html

<table><tbody cart-draw></tbody></table> 

ломовая draw.html

<tbody ng-repeat="body in bodies"> 
    <tr> 
    <td> 
     {{body}} 
    </td> 
    </tr> 
</tbody> 

app.js

$scope.bodies = ["hello1", "hello2", "hello3"]; 

Answer 2

Это долгожданная проблема в репозитории Angular's Github.

https://github.com/angular/angular.js/issues/1459

я наткнулся на эту проблему раз (с SVG). Это происходит потому, что перед рендерингом директивы шаблон перекрестно проверен с помощью HTML DTD и сам по себе не имеет смысла (без тега), и поэтому он не работает. То же самое относится и к <tr> и <li>

Есть много решений, которые используют ng-transclude и link функции, чтобы обернуть его в соответствующем родительском тег, а затем использовать его.

Answer 3

Это на самом деле известно & странный вопрос, когда дело доходит до директивы & <table> «с.

Я считаю, что это на самом деле происходит как invalid HTML сначала, заставляя его как-то появляться за пределами вашего тега <table>.

Попробуйте сделать телеги нарисовать атрибут из <tbody>:

<table> 
    <tbody cart-draw></tbody> 
</table> 

plunker Example

Это заставит его работать, как предполагалось.