l'inclusion de la directive Dynamiquement dans la vue

Question

Disons que j'ai les directives suivantes:

• myDirectiveA
• myDirectiveB
• ...

et j'ai une variable (module) qui peut être a ou b, ... Je veux afficher dynamiquement les directives en fonction de module.

Je sais que je pouvais faire

<div class="my-directives-a" ng-show="module == 'a'"></div> 
<div class="my-directives-b" ng-show="module == 'b'"></div> 

mais ce n'est pas exactement ce que je veux. Sur mon projet, je voudrais avoir quelque chose comme ça

<div ng-repeat="module in modules"> 
    <div class="my-directive-{{ module }}" ...></div> 
</div> 

Je créé ce plunker script pour vérifier mon idée, mais cela ne semble pas fonctionner :(

Ma question sont: est-ce possible et si oui, comment? et est-ce une bonne idée en premier lieu ou devrais-je essayer de résoudre mon problème d'une manière différente?

Answer 1

une option pour accomplir des directives dynamiques est par l'utilisation de la compilation $.

Compte tenu une directive:

angular.module(...) 
.directive("dynamicDirective", ["$compile", function($compile) { 
    return { 
    scope: { dirName: "=" }, 
    link: function(scope, elem, attrs) { 
     var template = '<div class="my-directives-"' + scope.dirName + '></div>'; 
     directiveElem = $compile(template); 
     elem.append(directiveElem); 
    } 
    }; 
}]); 

Vous pouvez utiliser la directive comme suit:

<div dynamic-directive dir-name="module" ng-repeat="module in modules"></div>