Angular add directive template to table
I have a situation where I need to repeat multiple bodies in one table, what I am trying to do is do every tbody directive and I want its template to be added to the table, but when im put the directive inside the table tag, its put its content outside the table.
basket pointer:
return {
restrict : 'AE',
templateUrl: 'client/cart/views/cart-draw.html',
scope : {},
replace: true,
controller : controller
}
tpl:
<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>
here is the plunker, if you check the element you can see the tbody is off the table: http://plnkr.co/edit/9wEGFE5K0w0ayp6qo8Lx?p=preview
source to share
This is because the tag <table>
does not recognize your custom element <cart-draw>
as a valid child.
I would change like this: http://plnkr.co/edit/u88N76h5dvLAvR3C1kRs?p=preview
index.html
<table><tbody cart-draw></tbody></table>
country draw.html
<tbody ng-repeat="body in bodies">
<tr>
<td>
{{body}}
</td>
</tr>
</tbody>
app.js
$scope.bodies = ["hello1", "hello2", "hello3"];
source to share
This is a long awaited issue in the Angular Github repo.
https://github.com/angular/angular.js/issues/1459
I also came across this issue once (with SVG). This is because the template is cross-validated with the HTML DTD before the directive is rendered , and one is meaningless (no tag) and therefore does not work. The same applies to <tr>
and<li>
There are many solutions that use the ng-transclude
and function link
to wrap it in an appropriate parent tag and then use it.
source to share
This is a really known and strange problem when it comes to directives and <table>
.
I suppose this actually happens like invalid
HTML at first, causing it to appear outside of your tag somehow <table>
.
Try to make cart-draw an attribute <tbody>
:
<table>
<tbody cart-draw></tbody>
</table>
This will launch it as intended.
source to share