0

ディレクティブ内でネストされたテンプレートを使用するさまざまな方法を見ましたが、どれもうまく機能しません。少なくとも、さまざまな問題を解決することはできませんでした。

つまり、アイデアとは-さまざまな論理部分(ヘッダー、フッター、メニュー、アクションバー、コンテンツ、セレクターなど)で構成される再利用可能なディレクティブを作成する必要があるということです。私が必要としているのは、テンプレート全体と、次のように HTML レイアウトのすぐ内側にあるさまざまな部分のテンプレートを指定できるようにすることです。

<videoBoard>
    <header-template>{{heading}}</header-template>
    <menu-template><a ng-click="showVideo()"/></menu-template>
    <content>
         <a ng-href="{{item.link}}" ng-repeat="items">{{item.caption}}</a>
    </content>
<videoBoard>

この定義に基づいて、ディレクティブで直接指定したかのようにターゲット HTML レイアウトが作成されます。同じことを、スコープ変数によって渡される HTML 要素を使用してコードで指定できるようにする必要があります。

そんな感じ。ここでいくつかのテンプレートを指定しない場合は、デフォルトのテンプレート (個別に定義されたもの、またはテンプレート全体のマークされた部分の中で定義されたもの) を使用します。スコープなどのすべてのもの、変更の追跡が機能するはずです。

では、これを最善の方法で行うにはどうすればよいでしょうか。

4

1 に答える 1

0

あなたの質問は、単一のSOの質問には広すぎると思います。動的テンプレートについて別の質問をしたい場合は、アイテムを置き換える1つの方法があります... (フィドル)

<script type="text/ng-template" id="test.html">
    <h1>Template H1 for {{name}}</h1>
    This should replace everything, but the &lt;h1&gt;
    element can be overridden
</script>    

<div class="boxed">
    <parent>
        <h1>Hello, {{name}}</h1>
        This should say only the person's name
    </parent>
</div>

<div class="boxed">
    <parent>
        This should say whatever the default is
    </parent>
</div>

テンプレート化可能なテンプレート

transcludeandcompileの代わりにand を使用linkすると、テンプレートを使用しても元の要素にアクセスできます。この関数は、ディレクティブによって返されるcompile通常の関数と同様の関数を返します。呼び出すことができる関数である引数として取り、元の要素にアクセスできる別の関数を提供します（linkここ）。linkerclone

    transclude: true,
    templateUrl: 'test.html',
    compile: function(element, attrs, linker) {
        // need to return linking function
        var parent = element.parent();
        return function($scope, $element, $attrs) {
            linker($scope, function(clone) {
                // 'clone' is a copy of the original elements in our 'parent' element
                var existing = $element.find('h1'); // in template
                if (existing.length == 1) {
                    // look for replacement h1 element specified in code
                    for (var i = 0; i < clone.length; i++) {
                        if (clone[i].tagName == "H1") {
                            // replace h1 element in template with specified
                            $element[0].replaceChild(clone[i], existing[0]);
                            break;
                        }
                    }
                }
            });
        }

parentこれはテンプレートを使用し、タグの間にあるものを完全に置き換えますが、clone引数を使用して元のコンテンツにアクセスできます。ここでは、元の要素に存在する場合は要素を取得し、それを使用してテンプレートh1の要素を置き換えます。h1構文は少しおかしいです。私はただできることを望んでいましたclone.find('h1')が、クローンは、私が考えて見つけたJQLiteオブジェクトの配列のようです。

于 2013-10-10T19:40:12.083 に答える