dotnetcoder dotnetcoder - 2 months ago 7
AngularJS Question

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

I have a table where the rows are repeated via

I am trying to create a template that generates columns
for each row

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

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

The issue is my custom td template is not rendered at all.
Here I intend to replace
with n number of
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.


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: