Création de n popover dynamiquement sur chaque élément d'une liste

Bonjour à tous,

j'ai une liste d'objet, et j'aimerais créer un popover bootstrap en lien avec chacun d'eux dynamiquement.

Dans mon controller je fais la création des configurations des popovers de la façon suivante :

Je boucle sur ma liste de carriere et j'appelle à chaque fois cette fonction :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

var creerPopover = function(carriere){ $scope["dynamicPopover" + carriere.indicePopover] = { templateUrl: 'myPopoverTemplate' + carriere.indicePopover + '.html', isOpen: false, open: function open() { $scope.closeAllPopover(); $scope["dynamicPopover" + carriere.indicePopover].isOpen = true; }, close: function close() { $scope["dynamicPopover" + carriere.indicePopover].isOpen = false; } }; };

---

Via ng-inscpector je vérifie que j'ai bien tous mes objets $scope["dynamicPopover" + carriere.indicePopover] dans mon scope. En voici un pour exemple :
Pièce jointe 198410


Ensuite, dans ma vue html j'effectue une boucle sur ma liste afin de créer le template correspondant ainsi qu'un texte pour ouvrir la popover :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<div class="col-xs-12" ng-repeat="car in listeCar"> <span uib-popover-template="dynamicPopover{{car.indicePopover}}.templateUrl" popover-placement="bottom" popover-is-open="dynamicPopover{{car.indicePopover}}.isOpen" ng-mouseover="openDynamicPopover(car.indicePopover)" ng-click="openDynamicPopover(car.indicePopover)"> Bonjour template {{car.indicePopover}} ! <script type="text/ng-template" id="myPopoverTemplate{{car.indicePopover}}.html"> <div>Coucou</div> </script> </span> </div>

---

Dans mon navigateur, le code html généré me convient :
Pièce jointe 198411

Mais lorsque je passe sur mon élément "Bonjour template 84 !" par exemple, j'ai l'erreur suivante :
GET http://localhost:8080/*****/myPopoverTemplate84.html 404 (Not Found)

Qu'est ce que j'ai mal fait au niveau de la création de la popover ?

Merci d'avance.

Complément d'information :

Le code généré suivant me semble bon dans mon navigateur :

Code:

---

<script type="text/ng-template" id="myPopoverTemplate84.html">

---

Par contre si au lieu de :

Code:

---

<script type="text/ng-template" id="myPopoverTemplate{{car.indicePopover}}.html">

---

je met en dur dans ma vue html :

Code:

---

<script type="text/ng-template" id="myPopoverTemplate84.html">

---

j'ai bien ma popover qui s'affiche ....


Pour résumé mon problème :
pourquoi lorsque je met en id de ma template directement "myPopoverTemplate84.html" ça marche mais lorsque je met en id une chaîne avec paramètre "myPopoverTemplate{{car.indicePopover}}.html" ça ne marche pas ?
(Alors qu'au final la valeur affichée est aussi "myPopoverTemplate84.html" quand je regarde le code de la page)

Mea culpa pour ma bêtise ...

Je ne comprend pas pourquoi je m'obstine à créer un template pour chaque popover à afficher, sachant que le contenu est le même à chaque fois à part les parties {{}}...

J'ai donc renommer ma template avec un id "myPopoverTemplate.html" et dans ma boucle créant la configuration des popovers j'ai mis la même tout le temps la même templateUrl "myPopoverTemplate.html" :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

var creerPopover = function(carriere){ $scope["dynamicPopover" + carriere.indicePopover] = { templateUrl: "myPopoverTemplate.html", isOpen: false, open: function open() { $scope.closeAllPopover(); $scope["dynamicPopover" + carriere.indicePopover].isOpen = true; }, close: function close() { $scope["dynamicPopover" + carriere.indicePopover].isOpen = false; } }; };

---

Désolé du dérangement et merci à ceux qui ont pris le temps de me lire et peut être d'y réfléchir...