2012-10-02 11 views
27

私は自分自身が何度も何度も同じコードスニペットを繰り返し見つけることだ、それはAngularJSでこのような何かを行うことが可能です:AngularJSテンプレート内で再利用可能なスニペットを使用することはできますか?

<div ng-snippet="mySnippet"> 
    This is a snippet 
</div> 

<div ng-snippet="anotherSnippet"> 
    Yet another snippet!! 
</div> 

<ng:include src="anotherSnippet"> 
<ng:include src="anotherSnippet"> 
<ng:include src="mySnippet"> 

と上記の出力は次のようになります。

Yet another snippet!! 
Yet another snippet!! 
This is a snippet 

私は必ずしもこの正確な "ng:include"のソリューションやパターンを探しているわけではありませんが、テンプレートの繰り返しを減らすものです。

答えて

37
<script type='text/ng-template' id="mySnippet"> 
    This is a snippet 
</script> 

<script type='text/ng-template' id="anotherSnippet"> 
    Yet another snippet!! 
</script> 

<ng-include src="'anotherSnippet'"></ng-include> 
<ng-include src="'anotherSnippet'"></ng-include> 
<ng-include src="'mySnippet'"></ng-include> 

これは必要なものです。

scriptおよびng-includeのドキュメント。

+0

パーフェクト、ありがとう! – DaveJ

+0

素晴らしいです。入力が異なるオブジェクトにリンクし、入力の名前が異なるようにするフォームはどうでしょうか? https://plnkr.co/edit/iCOIq88e7gSSYaE92b0t?p=preview –

12

directivesのように聞こえます。簡単な例を次に示します。http://jsfiddle.net/gyF6V/1/

+3

私はincludeを介して指示に従います。彼らはあなたのマークアップをより読みやすくします。 – btford

+12

文字列の中にhtmlが見えるときはいつも、私の中の何かが正しく感じられません。 –

+10

javascriptの中にhtmlを入れたくない場合は、単に 'template'の代わりに' templateUrl'プロパティを使い、あなたのテンプレートを持つhtmlファイルを指してください。 – dnc253

関連する問題