Injection dynamique de directive dans un template

**Peps16** · 10/07/2014, 17h15

Bonjour,

Je suis actuellement entrain de découvrir AngularJS et je pense qu'il y a quelque chose que je n'ai pas compris.

Pour faire simple, j'ai deux directives "a-tag" et "b-tag" et je souhaite injecter dynamiquement l'une des deux directives à partir du 3ème directive "container". L'idée c'est d'avoir quelque chose du style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<body ng-app="myApp">
    <container item="b-tag" b-color="#f00"></container>
</body>

J'ai coder ma directive "container" afin qu'elle récupère l'item (a ou b ou même autre chose) et se l'injecte

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
angular.module("Container", []).directive("container", function($compile){
    return {
        restrict: "EA",
        scope: {
            item: "@"
        },
        link: function(scope, element, attrs){
            var template = '<div id="container">';
            var item = '';
            if(scope.item !== undefined){
                item = '<' + scope.item;
                item += ' ></' + scope.item + '>';
 
            }
            template += item + '</div>';
            element.html(template);
            $compile(element.contents())(scope);
        }
    };
});

Cela fonctionne mais le problème est que je ne sais pas comment communiquer à ma directive (a/b,etc.) ses attributs (b-color="#f00" comme montré dans le tag container).

C'est un exemple simple que j'utilise car en réalité le problème auquel je suis confronté et que je souhaite avoir une popup modale (qui correspond à mon container) dans laquelle je veux injecter diverses élements (spinner, formulaire, question, etc.) qui correspondent à mes directives a, b, etc.

Si quelqu'un a une idée je suis preneur.

Merci d'avance.

**Marco46** · 11/07/2014, 13h11

Je pense que tu as mal compris ce qu'est une directive.

Une directive c'est un moyen d'enrichir le HTML avec des tags et des classes persos.

Une fois que ta directive est créée tu n'as pas besoin de l'injecter comme pour un service dans un controleur.

Tu t'en sers dans ton template directement.

Bref tu te compliques la vie pour rien.

Tu peux enlever l'attribut item à container et directement te servir des directives a-tag et b-tag dans le template de container.

Si ça merde vient poster la stacktrace ici.

**Peps16** · 11/07/2014, 13h33

Salut et merci pour ta réponse

.

Au début j'avais effectivement directement utilisé ma directive a-tag dans le template de ma directive container. Cependant ce qui me gêne c'est que je crée une dépendance directe entre le container et ma directive a-tag. L'idée c'est que le container puisse être réutilisé. Un exemple concret....

Comme expliqué précédemment, j'ai crée une directive qui m'affiche une popup modale (il s'agit de mon container). Une fois la directive de la popup crée, j'ai utilisé directement dans son template une autre directive, en l’occurrence un loader svg (ce qui correspond à mon a-tag). Maintenant imagine que je souhaite non plus afficher un loader dans ma popup modale (mon container) mais un formulaire, ou une image (b-tag) par exemple. Etant données que le template de la directive de ma popup modale est lié à la directive de mon loader, je vais devoir recréer une directive similaire mais cette fois avec un formulaire dans mon template...C'est pour cela en fait que je souhaite ajouter dynamiquement une directive dans le template de mon container, afin que le container ne dépende pas directement d'une directive particulière.

Je ne sais pas si mon explication est suffisamment claire.

**Marco46** · 11/07/2014, 14h36

Ok je comprends.

Tu devrais peut être t'inspirer de la modale du pprojet angular-ui. Ils injectent le template et font pas mal de config dans un service.

**Peps16** · 11/07/2014, 14h50

Merci pour le lien je vais jeter un œil

Injection dynamique de directive dans un template

AngularJS

Discussions similaires

Partager

Partager