Direktive funktioniert nicht innerhalb <tr> das ist ng-repeat gebunden

Question

Ich habe eine Tabelle, wo die Zeilen über ng-repeat wiederholt werden. Ich versuche, eine Vorlage zu erstellen, die Spalten <td> für jede Zeile erzeugt <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> 

Das Problem ist meine Gewohnheit td Vorlage überhaupt nicht wiedergegeben wird. Hier beabsichtige ich, <customtd> durch n Nummer <td> s zu ersetzen - was basierend auf der Anzahl der Eigenschaften auf meinem Datenobjekt entschieden wird, aber im Moment versuche ich nur eine einfache Direktive zu erhalten, die zwei Spalten ausgibt.

MYPLUNKER: zeigt eine Instanz dieses Problems und den Anweisungscode.

Answer 1

Wie in Kommentaren erwähnt, sollte die Vorlage einer Direktive ein einzelnes Wurzelelement haben. So würde ich Ihnen vorschlagen, das tr Element der Vorlage der Richtlinie zu verschieben, wie folgt aus: http://plnkr.co/edit/YjLEDSGVipuKTqC2i4Ng?p=preview

Answer 2

Als Pavlo schrieb, können Sie das tr Element der Vorlage für die Richtlinie bewegen. Eine andere Option ist die Verwendung eines td Elements und einer Direktive, die Ihre td durch die Vorlage ersetzt, die Sie verwenden möchten.

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

Richtlinie 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