Dies ist ein Follow-up zudiese Frag.

Ich versuche zu bauen und HTML<table> mit mehreren<tr> Reihen. Ich möchte, dass einige dieser Zeilen von meiner Direktive @ gerendert werdemyDirectiveA und andere, die von meiner Direktive 'myDirectiveB' gerendert werden sollen.

Unten können Sie sehen, wie meine Dateien aussehen. Es funktioniert alles gut, wenn es nur ein @ gi<tr> Zeile in der Dateipath/to/myDirectiveA.template.html. Sobald ich dort eine weitere Zeile hinzufüge, wird der folgende Fehler angezeigt:

`angular.js:13920 Error: [$compile:tplrt] Template for directive 'myDirectiveA' must have exactly one root element. path/to/myDirectiveA.template.html`

Ok, wenn ich also nur ein Stammelement in dieser Vorlagendatei haben darf, wie kann ich dann meine Tabelle mit mehreren Zeilen aus verschiedenen Anweisungen erstellen? Wie lösen andere Leute diesen scheinbar häufigen Anwendungsfall?

Hier sind meine Dateien:

main.html:

<div ng-controller="MainCtrl as mainCtrl">
  <table width="40%" border="1">
    <tbody>
      <tr my-directive-a a="mainCtrl.a"></tr>
    </tbody>
  </table>
</div>

app.js:

myApp.directive('myDirectiveA',function(){
  return {
    'replace': true,
    'restrict': 'A',
    'scope': {
      'a': '='
    },
    'controller': 'MyDirectiveACtrl',
    'controllerAs': 'MyDirectiveACtrl',
    'bindToController': true,
    'templateUrl': "path/to/myDirectiveA.template.html"
  };
});


myApp.controller('MyDirectiveACtrl', function($scope){
    var self = this;
    $scope.$watch(function() {return {'a': self.a};}, function (objVal) {},true);
  }
);

path / to / myDirectiveA.template.html:

<tr>
    <td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td>
    <td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
</tr>