6

Angular でこのオブジェクトを取得しました。

$scope.columns = {
    workspace: {
        title: "Workspace",
        type: "workspace",
        activities: []
    },
    alerts: {
        title: "Alerts",
        type: "alert",
        activities: []
    },
    main: {
        title: "Main Feed",
        type: "main",
        activities: []
    }
};

そして、私の HTML では、それをループして、アプリに一連の列を動的に作成する必要があります (Trello のようなものを考えてください)。

それぞれtypeがカスタム ディレクティブへの参照です。

ディレクティブを配置する最良の方法を見つけようとしています。

このデータに基づいて、以下のコードはこれらを動的に作成する適切な方法ですか?

<div ng-repeat="(key, obj) in columns">

    <div ng-switch on="obj.type">
        <workspace-feed ng-switch-when="workspace" />
        <alert-feed ng-switch-when="alert" />
        <main-feed ng-switch-when="main" />
        <filter-feed ng-switch-when="filter" />
    </div>

</div>

...のようなことができるようになりたいのです<{{obj.type}}-feed />が、これが有効かどうか、またはこれを作成するためのより良い方法があるかどうかはわかりません。

考えは大歓迎です！

4

1 に答える 1

2

あなたがこれまで持っているものはうまく見えます。

列の違いに応じて、複数のディレクティブではなく、テンプレートを動的にロードするディレクティブを 1 つだけ使用することを選択できます。たとえば、次を見てくださいng-include。

<div ng-include="'columns/' + column.type + '.html'"></div>
于 2015-07-07T20:48:14.410 に答える