Injection dynamique de directive dans un template
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:
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:
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.
