Choix conditionnel de la directive

Question

Je veux choisir la directive à utiliser en fonction d'une variable. Plus précisément, j'ai des éléments de plusieurs types différents dans une liste, et je voudrais utiliser le type d'élément pour choisir la directive qui peut l'afficher.

ng-switch semble destiné à cet effet. Cependant, il ajoute tous les choix de commutateurs dans le DOM, puis les cache tous sauf un. Cette approche semble inefficace s'il y a de nombreux types d'éléments ou une longue liste à afficher. De plus, l'utilisation d'un commutateur place la logique dans le HTML. Il serait préférable d'utiliser un "modèle de stratégie" qui choisirait simplement la bonne directive, comme par exemple

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

où les directives sont 'displayType1', 'displayType2', et ainsi de suite. Cependant, cette syntaxe ne semble pas fonctionner, peut-être à cause de la différence entre les phases de compilation et de liaison. Ici est un exemple qui permet de changer de modèle html à l'intérieur d'une directive. Mais existe-t-il un moyen de changer de directive tout en conservant sa modularité ?

Answer 1

Ajout de la solution basée sur le conseil de @CodeGuy2001.

L'approche à adopter ici est de créer un modèle angulaire pour chacune des variations de la directive avec un nom de modèle différent.

Utilisez ensuite le ng-include pour sélectionner le modèle qui doit être utilisé. Puisque ng-include prend en charge la liaison de données avec src propriété. Vous pouvez changer de modèle et donc de directives de manière dynamique.

Voir le violon en action http://jsfiddle.net/xpKwb/2/

Answer 2

Je ne connais pas de moyen d'ajouter un nom de directive dynamique comme celui-là. Quelques idées alternatives :

1) Il suffit d'utiliser une seule directive avec item.type comme paramètre, et de faire en sorte que la directive agisse différemment en fonction de sa valeur.

2) Au lieu de ng-switch, utilisez ng-if qui supprime réellement l'élément du DOM au lieu de le cacher (comme ng-hide ou ng-switch).