eckige Tabelle Zeile Komponente in Tabelle Komponente

Question

Ich habe eine Tabellenkomponente, aus der ich Tabellenzeile Komponenten als Kinder erstellen möchte.

var documentsController = function() {}; 

var documentsComponent = { 
    template: '<div class="col-lg-12 col-md-12 tableDataContainer">' + 
      ' <table class="table">' + 
      ' <thead>' + 
      '  <tr>' + 
      '  <td>Name</td>' + 
      '  <td>Document Type</td>' + 
      '  </tr>' + 
      ' </thead>' + 
      ' <tr ng-repeat="document in vm.documents">' + 
      '  <document document="document"></document>' + 
      ' </tr>' + 
      ' </table>' + 
      '</div>', 
    controller: documentsController, 
    controllerAs: 'vm', 
    bindings: { 
     documents: '<' 
    } 
}; 

Hier ist meine Tabellenzeile Komponente:

module.component('documents', documentsComponent); 

var documentController = function() { 
}; 

var documentComponent = { 
    template: 
      ' <td>fl ={{vm.document}}</td>' + 
      ' <td>{{document.Name}}</td>', 
    controller: documentController, 
    replace: true, 
    controllerAs: 'vm', 
    bindings: { 
     document: '<' 
    } 
}; 

module.component('document', documentComponent); 

Das Problem ist, dass das Markup nicht korrekt ist. Das Dokument befindet sich außerhalb der Tabelle:

<div class="col-lg-12 col-md-12 tableDataContainer"> 
    <document document="document" class="ng-isolate-scope"> 
     <tr> 
      <td class="ng-binding">fl =</td> 
      <td class="ng-binding"></td> 
     </tr> 
     </document> 
    <table class="table"> 
     <thead> 
      <tr> 
       <td>Name</td> 
       <td>Document Type</td>  
      </tr> 
     </thead> 
     <tbody><!-- ngRepeat: document in vm.documents --> 
     <tr ng-repeat="document in vm.documents" class="ng-scope"> 
     </tr> 
     <!-- end ngRepeat: document in vm.documents --> 
     </tbody> 
     </table> 
     </div> 

Auch wird das Dokument nicht auf die Reihe Komponente übergeben zu werden, und ich weiß nicht, warum.

Answer 1

Art der späten Antwort, aber ich hoffe, es hilft noch jemand. Denn alles, was nicht ein td oder th innerhalb eines tr Tags ist "zu" ungültigen HTML, und Ihr Browser wirft es einfach aus.

Versuchen Sie, diese (keine Winkel oder alles, was mit dem Ergebnis stören):

<table> 
 
<tbody> 
 

 
    <tr> 
 
    <td>td in row 1</td> 
 
    <div>div in row 1</div> 
 
    </tr> 
 

 
    <tr> 
 
    <td>td in row 2</td> 
 
    <div>div in row 2</div> 
 
    </tr> 
 

 
</tbody> 
 
</table>

Die td wird in der Tabelle angezeigt, wie Sie Zeilen hinzufügen, aber die div werden verschoben außerhalb (im Falle von Chrom, vorher) den Tisch von Ihrem Browser. Noch bevor eckig eine Chance hat, den HTML-Code zu parsen.

Als Abhilfe können Sie eine Richtlinie mit restrict: 'A' verwenden, und eine Vorlage wie folgt aus:

<tr ng-repeat="document in vm.documents" document="document"> 
</tr>