AngularJS - Usar parciales dinámicamente en otros parciales

Question

Soy relativamente nuevo en AngularJS y me gustaría saber qué tan factible es obtener dinámicamente plantillas parciales. Considere este módulo abstraído (y simplificado para este ejemplo). Esto en sí mismo sería una plantilla parcial que se reutilizará en toda la aplicación.

marcado Módulo Parcial

<div class="module"> 
    <h2 class="module-title">{{module.title}}</h2> 

    <div class="module-content"> 
     {{module.content}} 
    </div> 

</div> 

Después de ir a buscar un poco de lado del cliente los datos, que pueden desear para module.content ser una simple cadena de texto, no hay problemas. Lo que sería útil es si pudiera insertar dinámicamente otras plantillas parciales en module.content según los datos con los que estoy trabajando. Por ejemplo, en mi respuesta, tengo una lista de titulares que deseo mostrar, ¿es posible obtener una plantilla parcial que maneje los titulares? Y en otro lugar, module.content podría ser una plantilla parcial que maneja una galería de imágenes.

¡Cualquier entrada o dirección sería muy apreciada!

Answer 1

Hay un par de enfoques disponibles para usted.

Su mejor opción es agregar su propio directive. Ampliando su ejemplo:

module.directive('myModule', function() { 
    return { 
    restrict: 'A', 
    scope : { 
     title : '@' 
    }, 
    templateUrl : '/partial/module.html', 
    transclude : true 
    }; 
}); 

Utilizaremos la transclusión para hacer que los contenidos sean más flexibles. Ahora el parcial:

<div class="module"> 
    <h2 class="module-title">{{title}}</h2> 

    <div class="module-content" ng-transclude></div> 
</div> 

Con esta directiva instalado, puede utilizar el siguiente código HTML:

<div my-module title="{{module.title}}"> 
    {{module.content}} 
</div> 

Otra opción es utilizar la directiva ng-include. Este es un transclusion simple de un parcial, siendo la diferencia que las vidas parciales transcluida en el mismo alcance que el contexto que estaba incluido en.

<div ng-include="module.partialUrl"></div> 

En el caso anterior, angular se transcluirla la parcial en el URL en $scope.module.partialUrl. (Editar: esto significa que puede sustituir dinámicamente a las IU reemplazando la variable de ámbito utilizada por ngInclude. Impresionante, ¿no?)

Si solo está reutilizando el mismo elemento para evitar el código repetitivo, simplemente rodee la URL en solo cotizaciones:

<div ng-include="'/partial/foo.html'"></div>