1

ディレクティブを別のディレクティブでラップしようとしていますが、問題が発生しています。たとえば、UI Bootstrap タブとペイン ディレクティブを使用すると、次のようになります。

私は次のようなものにしたい:

<tabs>
    <pane heading="FOO">...</pane>
    <pane heading="BAR">...</pane>
</tabs>

の中へ：

<tabs>
    <pane-wrapper heading="FOO">...</pane-wrapper>
    <pane-wrapper heading="BAR">...</pane-wrapper>
</tabs>

ここで、ペイン ラッパー ディレクティブは次のようになります。

angular.module('test').directive('paneWrapper', function(){
        return{
            restrict: 'E',
            replace: true,
            template: "<pane ng-transclude></pane>" //somehow need to pass along the heading attribute
        }
    });

これを行う理由は、ペインを大幅に変更したくない、ラップしたい、おそらく複数のディレクティブを1つにまとめたいなどです。ペインディレクティブを完全にコピーして、1つのオプションとして変更できると思います。

とにかく、私はエラーが発生します：

Error: Multiple directives [ngTransclude, ngTransclude] asking for 'ngTransclude' controller on <div class='tab-pane' ng-class='active: selected' ng-show='selected' ng-tranclude=''>

考え？

ペインラッパースコープを作成する必要はありませんか? さまざまなデータを含む親スコープがあります...これをラップして、再利用可能なコンポーネントを作成したいだけです。

4

1 に答える 1

0

使ってみましたか

iElement.html($compile(<pane..)(scope));

テンプレート プロパティを削除し、<pane>iElement html を直接コンパイルして更新することに依存します。

replace: trueラッパー ディレクティブでプロパティを使用することもできます。

于 2013-03-27T21:43:41.633 に答える