non funziona all'interno di <tr> che è ng-repeat bound

Question

Ho una tabella in cui le righe vengono ripetute tramite ng-repeat. Sto cercando di creare un modello che genera colonne <td> per ogni riga <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> 

Il problema è il mio modello TD personalizzato non è resa a tutti. Qui ho intenzione di sostituire <customtd> con n numero di <td> s - che sarà deciso in base al numero di proprietà sul mio oggetto dati, ma al momento sto solo cercando di ottenere una semplice direttiva di lavoro che produrrà due colonne.

MYPLUNKER: mostra un'istanza di questo problema e il codice della direttiva.

Answer 1

Come indicato nei commenti, il modello di una direttiva dovrebbe avere un singolo elemento radice. Quindi vi suggerisco di spostare l'elemento tr al modello della direttiva, in questo modo: http://plnkr.co/edit/YjLEDSGVipuKTqC2i4Ng?p=preview

Answer 2

Come ha scritto Pavlo, è possibile spostare l'elemento tr al modello per la direttiva. Un'altra opzione è utilizzare un elemento e una direttiva td che sostituisce lo td con il modello che si desidera utilizzare.

<table> 
    <tr ng-repeat="p in positions"> 
    <td replace-me template="mytemplate.html" position="p"></td> 
    </tr> 
</table> 

direttiva replaceMe

.directive("replaceMe", ["$compile", '$http', '$templateCache', function ($compile, $http, $templateCache) { 
     return { 
      restrict: 'A', 
      scope: { 
       position: "=" 
      }, 
      link: function (scope, element, attrs) { 
       function getTemplate(template) { 
        $http.get(template, {cache: $templateCache}).success(function (templateContent) { 
         element.replaceWith($compile(templateContent)(scope)); 
        }); 
       } 
       scope.$watch(attrs.template, function() { 
        if (attrs.template) { 
         getTemplate(attrs.template); 
        } 
       }); 


      } 
     } 
    }]); 

mytemplate.html

<td>{{position.Name}}</td> 
<td>{{position.Code}}</td> 
<td another-my-directive></td> 

plunker