1

私はしばらくの間この質問を考えてきました.view(html)が双方向データバインディングの場合にコントローラーにバインドされている場合、angularjsでhtmlテンプレートを再利用するベストプラクティスは何ですか?

例えば:

<a ng-repeat="(uuid, parent) in pageData.parents" class="list-group-item list-group-item-padding"  ng-click="click(parent.uuid)">
    <table class="table-grid">
        <tbody>
        <tr>
            <td>
                {{parent.name}}
            </td>
            <td>
                <span class="pull-right {{parent.stateCss}} state-label-font">{{parent.state}}</span>
            </td>
        </tr>
        </tbody>
    </table>
</a>

上記のコード スニップでは、ビューは何らかのコントローラーにバインドされています。たとえば、ParentController とします。ビュー内のすべてのデータが「親」にちなんで名付けられていることがわかります。今、同じhtmlコードを再利用したいChildControllerという別のコントローラがありますが、データは「子」にちなんで名付けられています。つまり、この例のデータ バインディングは {{child.name}}, {{child.stateCss}} ... に変更されます。

Angularjs がモデルをビューの種類にバインドする方法は、非常に似ているように見えても、多くの重複した HTML コードを引き起こします。実際にはAngularjsではなく、後でレンダリングするためにビューファイルにモデル変数名をハードコーディングする限り、サーバー側のMVCフレームワークにも同じ問題があります。

MVCを使用していないWebアプリケーションには、ページの基本的なスケルトンをセットアップするいくつかのhtmlコードがあり、JQueryを使用してデータを動的にフィードしてプログラミング方法で表示するのを見ました。この JQuery の方法は私の好みではありませんが、多くの html コードを節約できます。アプリケーションは、10 個までのサブページ、リスト、ウィザードなどのタスクを実行する 1000 個までの html コードとしてのみかなり複雑だと思います。

angularjs では、私が想像できる 1 つの解決策は、ビュー内のモデル変数をカスタマイズされたディレクティブに置き換えて、実行時にスコープ/コントローラーを変更することです。または、コンパイル時に構成されたコントローラー/スコープにバインドするhtml要素を生成する構成オブジェクトを受け取るディレクティブがあります。

あなたの考えは何ですか?

4

2 に答える 2