Discussion :

[francky74]

Bonjour,

J'ai un $scope dans lequel j'ai une liste de sources pour des <iframes> que je souhaite présenter en lignes (rows...).

J'utilise un ng-repeat et je souhaite insérer la valeur de la source dans le paramètre src du <iframe> mais cela ne fonctionne pas ! J'ai un message d'erreur file not found.
j'ai essayé avec double moustache {{}}, simples moustaches {} et même sans moustaches ... Pourtant les autres données issues du $scope comme titre, jours et horaire fonctionnent très bien et lorsque j'affiche dans un <div> la donnée de la source, je la vois apparaître à l'écran. Mais lorsque je place le $scope dans les double quottes, ce n'est pas pris en compte.

Une personne pourrait-elle m'aider s'il vous plaît ?

Voici ce que j'ai fait jusqu'à présent :

le html (c'est à la ligne 9 que je souhaite insérer la valeur de la source):

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="horaires_cols" ng-repeat="horaire in horaires" class="row horaires_class_color_or">
   <div class="col-md-7">
	   <h1 class="horaires_fontSize_2 text_align_center">{{horaire.titre}}</h1>
	   <h1 class="horaires_fontSize_2  text_align_center">{{horaire.jours}}</h1>
	   <h1 class="horaires_fontSize_2  text_align_center">{{horaire.horaire}}</h1>
   </div>
 
   <div class="col-md-5">
	   <iframe src="{{horaire.source}}" frameborder="0" allowfullscreen></iframe>
   </div>
</div>

le module :

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
var app = angular.module('app', ['ui.router']);
 
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
 
$stateProvider
.state('horaires_lieux', {
	url: '/horaires_lieux',
	views:{
		'general_view':{
			templateUrl: 'horaires_lieux.htm',
			controller: 'horaires_et_lieuxCtrl'
		}
	}
})
 
//...etc

le controller :

Code :

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

1
2
3
4
app.controller('horaires_et_lieuxCtrl', ['$scope', '$stateParams', 
	function($scope, $stateParams) {
		$scope.horaires = horaires;
}]);

le fichier data.js :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var horaires = [
  {
    "titre": "titre 1)",
    "jours": "Tous les mercredis et samedis",
    "horaire": "de 17h00 à 20h30",
    "source": "https://www.google.com/maps/embed?pb=!1m17!1m.....etc"
  },
  {
    "titre": "titre 2",
    "jours": "Tous les vendredis",
    "horaire": "de 18h00 à 20h30",
    "source": "https://www.google.com/maps/embed?pb=!1m17!1m......etc"
 }
];

mise à jour : Je me suis apperçu que le paramètre src recevait comme valeur le chemin vers un fichier {{horaire.source}} du dossier "vues" dans lequel se trouve le fichier html. J'ai modifié src par url et là je vois dans le navigateur qu'il a gardé ce paramètre et à bien mis l'url contenu dans la variable, mais cela ne fonctionne toujours pas !

[francky74]

Salut !

La solution que j'ai trouvé a été de rajouter un id dans les datas comme ceci :

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
var horaires = [
  {
    "id": "1",
    "titre": "titre 1",
    "jours": "Tous les mercredis et samedis",
    "horaire": "de 17h00 à 20h30",
    "source": "https://www.google.com/maps/embed?pb=!1m17!1m11!1m3!1d511..... etc"
  },
  {
    "id": "2",
    "titre": "titre 2",
    "jours": "Tous les vendredis",
    "horaire": "de 18h00 à 20h30",
    "source": "https://www.google.com/maps/embed?pb=!1m17!1m1.......etc"
  }
];

Puis de tester la condition sur l'id et de mettre le paramètre src en dur dans le code html :

Code HTML :

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

1
2
3
4
5
6
7
8
<div class="col-md-5">
	<iframe ng-if="horaire.id==1" src="https://www.google.com/maps/embed?pb=!1m17!1m11!1m3!1d511.79..... etc"
			frameborder="0" allowfullscreen>
	</iframe>
 
	<iframe ng-if="horaire.id==2" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m..... etc"   frameborder="0" allowfullscreen>
	</iframe>
</div>

Par contre, le sujet n'est pas résolu puisque je n'ai toujours pas pu utiliser le $scope pour le paramètre src du iframe.

[Marco46]

Essaie avec la directive ngSrc au lieu de src directement.

[francky74]

Bonjour,

Merci pour votre aide.

Voici le code html révisé contenant le ng-src :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="horaires_cols" ng-repeat="horaire in horaires" class="row horaires_class_color_or">
	<div class="col-md-7">
		<h1 class="horaires_fontSize_2 text_align_center">{{horaire.titre}}</h1>
		<h1 class="horaires_fontSize_2  text_align_center">{{horaire.jours}}</h1>
		<h1 class="horaires_fontSize_2  text_align_center">{{horaire.horaire}}</h1>
	</div>
 
	<div class="col-md-5">
		<iframe ng-src="{{horaire.source}}"
				frameborder="0" allowfullscreen>
		</iframe>
	</div>
</div>

Cela ne fonctionne pas ! j'ai essayé avec deux accolades, une seule accolade et sans accolades ....

Ensuite, j'ai essayé comme ceci :

Code HTML :

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

1
2
3
4
5
<div class="col-md-5">
	<iframe ng-src="https://www.google.com/maps/embed?pb={{horaire.source}}"
			frameborder="0" allowfullscreen>
	</iframe>
</div>

Cette fois, on peut voir une carte s'afficher mais c'est la carte générale du monde et non pas la carte d'un lieu précis dont les coordonnées sont indiquées dans la donné issue du $scope. De la même façon que précédemment, j'ai essayé avec double accolades, simples accolades, sans accolades, puis avec des simples quotes autour de la donnée du $scope. et j'ai même essayé avec $scope.horaire.source ....