javascript - page - Directiva angular con multiples plantillas.

page title angular 4

Question

Tarea:

• Para mostrar el contacto.
• El contacto es datos JSON, digamos {nombre: "Marca", ubicación: "Inglaterra", teléfonos: [...]}.
• El contacto se puede mostrar de varias maneras: compacto / detallado / mejorado con información adicional (contactos compartidos - directiva adicional)

Debido a que el contacto se puede mostrar en diferentes páginas en diferentes lugares, es natural crear una directiva (widget) para el contacto, pero aquí hay una pregunta: "¿Cómo organizar el mismo widget con varias plantillas?"

Opciones:

1. Cree una directiva con una plantilla, que oculte las secciones según el "tipo" de contacto : una plantilla grande con posiblemente un montón de ng-switch y ng-if
2. Crear directivas para cada plantilla : casi las mismas directivas con solo una plantilla diferente (o templateURL)
3. Para cargar plantillas dinámicamente mientras se vincula , tiene problemas con la transclusión y el reemplazo (combinación de atributos)

¿Cuál es tu experiencia con la solución de estos problemas?

Answer 1

He desarrollado un nuevo enfoque trabajando en el ejemplo de Adam y utilizando también el ejemplo de documentos angulares en el que hablan de funciones en la propiedad templateUrl https://docs.angularjs.org/guide/directive , este es el plunker de los documentos angulares: http://plnkr.co/edit/h2CSf2WqCLYfPvzL9WQn?p=preview

.directive(''myCustomer'', function() {
    return {
      templateUrl: function(elem, attr){
        return ''customer-''+attr.type+''.html'';
      }
    };
  });

Y esta es mi solución remezclada:

http://codepen.io/anon/pen/wawOyz?editors=101

app.factory(''templates'', function() {
  return {
    compact:   ''compact'',
    detailed:  ''detailed''
  };
 });

app.directive(''contact'', function(templates) {
  return {
    restrict: ''E'',
    templateUrl: function($elem, $attr){
      return templates[$attr.mode];       
    },
    scope: {
      contact: ''=ngModel''
    }
  };
});

Me gustó la idea de tener todas las direcciones de plantilla en una fábrica, pero me parece que la directiva por modo es bastante repetitiva y si tiene varios elementos con este enfoque, tendrá que ponerles un espacio de nombre (texto de contacto, texto de correo electrónico, texto de la empresa). ) para que no se bloqueen.

Todavía no estoy seguro de si esta es una mejor manera de ir, es más corto y más SECO, pero quizás sea más difícil de probar o menos personalizable. Solo quería compartir el enfoque en caso de que pueda ayudar a alguien.

Answer 2

Personalmente creo que la Opción 2 ofrece una separación limpia entre los modos de visualización. He creado un ejemplo de CodePen de trabajo para ilustrar cómo puede lograr esto de manera limpia mediante el uso de directivas separadas para cada plantilla.

El método que utilicé en mi ejemplo de CodePen utiliza una fábrica de plantillas que se inyecta en cada directiva a través de Angular DI. La implementación de la fábrica de plantillas es muy clara, ya que simplemente utiliza ng-include cadenas de plantillas para cada uno de los diferentes modos de visualización admitidos (compacto y detallado). Las plantillas HTML reales (parciales) se pueden alojar en archivos de vista externa o bloques de secuencia de comandos internos.

Usar las directivas de contacto es fácil:

<contact compact ng-repeat="contact in contacts" ng-model="contact"></contact>

Esto crea una versión compacta de la lista de contactos.

<contact detailed ng-repeat="contact in contacts" ng-model="contact"></contact>

Esto crea una lista de contactos detallada.

Admito que no he implementado un código como este en la producción, por lo que puede haber escalabilidad u otras preocupaciones que no haya considerado. Espero que el código que proporcioné responda a sus preguntas o, al menos, proporcione inspiración para una mayor exploración.