2016-09-15 4 views
0

たとえば、次のようなテンプレートがあります。AngularJS - ラッパーのないテンプレートを含める方法

template.html:

<div>div1</div> 
<div>div2</div> 

私はどこでも私が欲しいのラッパーなしでそれを含めたいので、結果はこのようなものです:それは持っているので

<body> 
. 
. 
<div>div1</div> 
<div>div2</div> 
. 
. 
</body> 

私はng-includeを使用することはできませんラッパー<ng-include>

replace:trueでディレクティブを作成しようとしましたが、テンプレートにルート要素が1つしかないというエラーが表示されます。

replace:trueが付いていないコメントディレクティブの場合、テンプレートは表示されません。

どうすればよいですか?ラッパーがレイアウトを台無しにするので、これが必要です。

+0

印刷されますあなたは可能性とそれがオプションではない理由をすでに指定しています。これはディレクティブを使用する方法ではありません。あなたがやろうとしていることによるが、これは現在のレイアウト/スタイルを変更することによって解決できるXY問題かもしれない。 – estus

答えて

0

はこれを試してみてください。ここ

app.directive('i', ['$interpolate', function($interpolate) { 
    return { 
    scope: { 
     i: '<' 
    }, 
    template: '<div>{{ i.text1 || \'DIV1\' }}</div><div>{{ i.text2 || \'DIV2\' }}</div>', 
    link: function (scope, element, attrs) { 
     element.after($interpolate(element.html())(scope)); 
     element.remove(); 
    } 
    }; 
}]); 

はplunker http://plnkr.co/edit/hRHMcvTfC2BNETO64SnW?p=preview

が渡されない場合は、印刷するためのテキスト変数を渡すことができている - devault 'DIV1' と 'DIV2は'

+0

ハックのように見えますが、機能します。ありがとう! – Shawn

0

レイアウト/スタイルを変更する必要があります。推奨されていないディレクティブと角度のあるディレクティブにはルート要素が1つしかなくてはならないため、replace:trueは使用しないことをお勧めします。

関連する問題