Scelta condizionale della direttiva

Question

Desidero scegliere quale direttiva utilizzare in base a una variabile. Nello specifico, ho elementi di diversi tipi in una lista, quindi mi piacerebbe usare il tipo di oggetto per scegliere la direttiva che può visualizzarlo.

ng-switch sembra destinato a questo scopo. Tuttavia, aggiunge tutte le opzioni dell'interruttore nel DOM, quindi nasconde tutte tranne una. Questo approccio sembra inefficiente se ci sono molti tipi di articoli o una lunga lista da visualizzare. Inoltre, l'utilizzo di un interruttore inserisce la logica nell'HTML. Preferito sarebbe un 'modello di strategia' che basta scegliere la direttiva destra, forse come

<display-{{item.type}} data="item.data" /> 

in cui le direttive sono 'displayType1', 'displayType2', e così via. Tuttavia, questa sintassi sembra non funzionare, forse a causa della differenza tra le fasi di compilazione e di collegamento. Here è un esempio che cambia i template html all'interno di una direttiva. Ma c'è un modo per cambiare le direttive, mantenendo la loro modularità?

Answer 1

Aggiungendo la soluzione basata su @ CodeGuy2001 consigli .

L'approccio da seguire è creare un modello angolare per ciascuna variazione della direttiva con un nome di modello diverso.

Quindi utilizzare ng-include per selezionare il modello che deve essere utilizzato. Poiché ng-include supporta il collegamento dati alla proprietà src. È possibile cambiare il modello e quindi le direttive in modo dinamico.

Vedere il violino in azione http://jsfiddle.net/xpKwb/2/

Answer 2

Non sono a conoscenza di un modo per aggiungere un nome di direttiva dinamico come quello. Un paio di idee alternative:

1) Basta usare una singola direttiva con item.type come parametro e fare in modo che la direttiva agisca diversamente in base al valore.

2) Invece di ng-switch, uso ng-se che rimuove effettivamente l'elemento dal DOM piuttosto che nasconderlo (come ng-nascondere o ng-switch)