dotnetcoder dotnetcoder - 4 months ago 8
AngularJS Question

directive not working inside <tr> that is ng-repeat bound

I have a table where the rows are repeated via

ng-repeat
.
I am trying to create a template that generates columns
<td>
for each row
<tr>


app.directive("customtd", function(){
return {
restrict: 'E',
template: "<td>{{position.Name}}</td><td>{{position.Code}}</td>",
replace: true,
scope: {
position: '='
}
}
});


<table>
<tr ng-repeat="p in positions">
<customtd position="p"></customtd>
</tr>
</table>


The issue is my custom td template is not rendered at all.
Here I intend to replace
<customtd>
with n number of
<td>
s - which will be decided based on number of properties on my data object, but at the moment I am just trying to get a simple directive working that will output two columns.

MYPLUNKER : shows an instance of this issue and the directive code.

Answer

As pointed out in comments the template of a directive should have single root element. So I would suggest you to move the tr element to the template of the directive, like this: http://plnkr.co/edit/YjLEDSGVipuKTqC2i4Ng?p=preview