1

ノードをレンダリングする特定の HTML テンプレートを使用して、ツリーのようなデータを取得し、ツリービュー スクリプト (入力としてマークアップを使用する) にフィードするディレクティブを作成したいと考えています。したがって、ディレクティブはデータ + ノード テンプレートを入力として受け取り、DOM サブツリーを挿入してから、サードパーティのプラグインを呼び出して並べ替え可能にします (これが重要な場合はhttp://dbushell.github.com/Nestable/が気になります)。

私には解決策がありますが、それはエレガントではありません。以下は HTML コードです (完全なサンプルはhttp://jsfiddle.net/DQjve/にあります):

<div ng-app="TestApp" ng-controller="TestCtrl">
    <script type="text/ng-template" id="tree.html">
        <div>
            <ng-include src="'branch.html'"></ng-include>
        </div>
    </script>

    <script type="text/ng-template" id="branch.html">
        <ul>
            <li ng-repeat="leaf in leaf.children" ng-include src="'leaf.html'">
            </li>
        </ul>
    </script>

    <script type="text/ng-template" id="leaf.html">
        <ng-include src="template"></ng-include>
        <ng-include src="'branch.html'"></ng-include>
    </script>

    <script type="text/ng-template" id="my-leaf.html">
        <span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;">{{leaf.name}}</span>
    </script>

    <tree root="tree" template="my-leaf.html"></tree>
</div>

目的のコードは次のようになります。

<div ng-app="TestApp" ng-controller="TestCtrl">
    <tree root="tree" template="my-leaf.html">
        <span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;">{{leaf.name}}</span>
    </tree>
</div>

目標:

  1. (あまり重要ではありません) すべてのユーティリティ テンプレートをディレクティブ JavaScript コード内に配置します。
  2. (より重要) <tree> タグのコンテンツをノード テンプレートとして使用します。

しかし、私は解決策を見つけることができません。

ポイント 1: おそらく、$templateCacheテンプレートを事前にキャッシュするために使用する必要がありますか? いくつかのユニークなテンプレート名がありますか? より良い解決策はありますか？

ポイント 2: ngTranscludep.2 に使用する必要がありますか? はいの場合、どのように？コンパイルが行われる前に、最初の <tree> タグの内容を文字列として取得する方法はありますか?

4

0 に答える 0