2012-10-02 8 views
27

estoy encontrando a mí mismo repitiendo los mismos fragmentos de código una y otra vez, es posible hacer algo como esto en AngularJS:¿Es posible hacer fragmentos reutilizables dentro de las plantillas de 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"> 

y la salida de los anteriores serían:

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

No necesariamente busco esta solución o patrón exacto de "ng: include", sino algo que reduciría la repetición en mis plantillas.

Respuesta

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> 

Esto debería ser lo que desea.

Documentos para script y ng-include.

+0

Perfecto, gracias! – DaveJ

+0

Impresionante. ¿Qué tal un formulario en el que desee que las entradas se vinculen con diferentes objetos y diferentes nombres para las entradas? https://plnkr.co/edit/iCOIq88e7gSSYaE92b0t?p=preview –

12

Parece que quiere usar directives. Aquí hay un ejemplo simple: http://jsfiddle.net/gyF6V/1/

+3

Iría con directivas sobre incluye; harán que tu marcado sea más legible. – btford

+12

Cada vez que veo html dentro de una cadena, algo dentro de mí simplemente no se siente bien. –

+10

Si no desea html dentro de javascript, simplemente use la propiedad 'templateUrl' en lugar de' template' y apúntela al archivo html que tiene su plantilla. – dnc253

Cuestiones relacionadas