Discussion :

[Bizoo]

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 :

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

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 :



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 :

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

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 :


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.

[Bizoo]

Complément d'information :

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

Code html :

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

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

Par contre si au lieu de :

Code html :

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

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

je met en dur dans ma vue html :

Code html :

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

<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)

[Bizoo]

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 :

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

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...