トランスクルージョンを使用して、ページの tbody 要素に適用されるディレクティブにコンテンツを挿入する必要があります。Transclude をディレクティブ テンプレートの tr 要素に適用しようとしていますが、どういうわけかブラウザが tr 要素を倍増させます。transclude が実行される前に、各 td リストを tr に自動ラップする必要があります。どうすればこれを防ぐことができますか?
注意: この場合、これをテーブルとして機能させる必要があるため、テーブルを div やその他の要素に置き換える提案は控えてください。
テンプレート:
<td class="drawer" ng-show="showDrawer">
DRAWER PLACEHOLDER
</td>
含むファイル:
<tbody ng-repeat="p in ps
drawer
drawer-id="p.ID">
<td class="p"><span>...</span></td>
<td class="p"><span>...</span></td>
...
></tbody>
js:
drawer.directive('drawer', [function() {
return {
restrict: 'A',
scope: {
drawerId: '=' // pass in player id
},
transclude: true,
templateUrl: openGlobals.paths.live.drawerTemplate,
link: function (scope) {
}
}
}
結果:
<tbody ng-repeat="p in ps
drawer
drawer-id="p.ID">
<tr ng-transclude>
<tr ng-scope>
<td class="p"><span>...</span></td>
<td class="p"><span>...</span></td>
...
</tr>
</tr>
</tbody>
どうしてそうなった?2 つのタグが入れ子になっているのはなぜですか?