AngularJSエラー：ディレクティブ 'XXXXXX'のテンプレートは、正確に1つのルート要素を持つ必要があります

Question

これはthis questionのフォローアップです。

複数の<tr>行のHTML <table>をビルドしようとしています。私はこれらの行の一部を私のディレクティブmyDirectiveAと他のものがmyディレクティブ 'myDirectiveB'によってレンダリングされるようにしたいと思います。

以下は、私のファイルがどのように見えるかを示しています。ファイルpath/to/myDirectiveA.template.htmlに1つだけ<tr>の行がある場合は、すべて正常に動作します。しかし、すぐに、私はそこに別の行を追加すると、私は次のエラーを取得する：

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

[OK]を、私はそれだけで、テンプレートファイル内の1つのルート要素を持ってさせていただいておりますので、もし、その後、どのように私は私のテーブルを構築することができますさまざまなディレクティブの複数行他の人がこの一見共通のユースケースを解決する方法は何ですか？ここで

は、私のファイルは、以下のとおりです。

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：/ myDirectiveA.template.htmlに

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); 
    } 
); 

パス/：

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

Answer 1

アプリ

<table width="40%" border="1"> 
    <tbody my-directive-a a="mainCtrl.a"> 
    </tbody> 
</table> 

と、このディレクティブのテンプレート

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

にそれはあなたがあなたの指示で唯一のルート要素を持つことができ、かつ複数のTRの内部を追加で使用これをそれの。