javascript - Ng-transclude が table 要素で機能しない

Question

データを表示するテーブルのディレクティブを作成しようとしています。

テーブルにはヘッダーとボディがあります。

理想的には、次のディレクティブが必要です。

<div my-table></div>
<div my-table-header></div>
<div my-table-body></div>

ng-transclude でそれらを使用できるように

<div my-table>
    <div my-table-header></div>
    <div my-table-body></div>
</div>

ただし、これは my-table の次のテンプレートでは機能しません。

<table class="table" ng-transclude></table>

ページがレンダリングされると、次のようになります。

<div my-table="" class="ng-scope">



            1
            2




            a
            b



        </div>

ng-transclude がテーブルでうまく機能しないという言及を見たことがあります。たとえば、

<table><div ng-transclude></div></table>

ブラウザは ng-transclude div をテーブルの外に移動します

やりたいことはかなり合理的なことのように思えるので、誰かがこの問題を解決した経験があるかどうか疑問に思っていました.

乾杯！

score 0 · Accepted Answer

これが唯一の解決策ではありません (願っています)。ただし、これを機能させるために私が見つけた唯一の方法は、my-table のテンプレートを次のようにすることです。

<tbody ng-transclude>
</tbody>

次に、マークアップでディレクティブをテーブルの属性として指定します

<table my-table>
    <my-table-header></my-table-header>
    <my-table-body></my-table-body>
</table>

これは、私がこれを機能させることができた唯一の形式です。

table 要素で my-table テンプレートをラップする

<table>
    <tbody ng-transclude></tbody>
</table>

またはテーブル自体に ng-transclude を置く

<table ng-transclude></table>

そして、それをdivの属性または要素としてインスタンス化してもまったく機能しません

<div my-table></div>
<my-table></mytable>

tl;dr

この解決策は機能しますが、次の理由で気に入りません。

1 に答える 1