2012-10-02 9 views
27

mi sto trovando a ripetere gli stessi frammenti di codice più e più volte, è possibile fare qualcosa di simile in AngularJS:È possibile eseguire snippet riutilizzabili all'interno di modelli 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"> 

e l'uscita di cui sopra sarebbe:

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

Non sono necessariamente alla ricerca di questa esatta soluzione o modello "ng: include" ma qualcosa che riduca la ripetizione nei miei modelli.

risposta

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> 

Questo dovrebbe essere quello che vuoi.

Documenti per script e ng-include.

+0

Perfetto, grazie! – DaveJ

+0

Fantastico. Che dire di un modulo in cui si desidera che gli input siano collegati a oggetti diversi e nomi diversi per gli input? https://plnkr.co/edit/iCOIq88e7gSSYaE92b0t?p=preview –

12

Sembra che tu voglia utilizzare directives. Ecco un semplice esempio: http://jsfiddle.net/gyF6V/1/

+3

Vorrei andare con le direttive sugli include; renderanno più leggibile il tuo markup. – btford

+12

Ogni volta che vedo html all'interno di una stringa, qualcosa dentro di me non mi sembra giusto. –

+10

Se non si desidera l'html all'interno del javascript, basta usare la proprietà 'templateUrl' invece di' template' e puntarlo nel file html che contiene il modello. – dnc253

Problemi correlati