2012-10-02 22 views
27

, angularjs içinde böyle bir şey yapmak mümkündür:AngularJS şablonlarında yeniden kullanılabilir parçacıkları yapmak mümkün mü? Tekrar tekrar aynı kod parçacıkları tekrar kendimi buluyorum

<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"> 

ve yukarıda olacağını çıktı:

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

Bu tam olarak "ng: include" çözümünü veya desenini aramam, ancak şablonlarımdaki tekrarlamayı azaltacak bir şey arıyorum.

cevap

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> 

İstediğin şekilde olmalıdır: İşte basit bir örnek.

script ve ng-include için belgeler.

+0

Mükemmel, teşekkürler! – DaveJ

+0

Müthiş. Farklı nesnelere ve girdiler için farklı isimlere bağlanmak için girişler istediğiniz bir form nedir? https://plnkr.co/edit/iCOIq88e7gSSYaE92b0t?p=preview –

12

directives kullanmak istediğiniz gibi geliyor. http://jsfiddle.net/gyF6V/1/

+3

İçerdiği yönergelerle giderdim; İşaretlemenizi daha okunabilir yapacaklar. – btford

+12

Bir dize içinde html gördüğümde, içimdeki bir şey doğru hissetmiyor. –

+10

Javascript içinde html istemiyorsanız, sadece 'template' yerine 'templateUrl 'özelliğini kullanın ve şablonunuzu içeren html dosyasına gelin. – dnc253

İlgili konular