Concaténer une variable dans l'url d'une iframe sur ionic / Angular

Par FactureHero.com, il y a 10 ans

Javascript

Bonjour, je rencontre le problème suivant. Je développer sur Ionic et je souhaite afficher dans une vue une vidéo Youtube. L'ID de la video est une variable que je récupère depuis une requête.

Comment concaténer cette variable "idVideo" dans :

<iframe src="https://www.youtube.com/embed/"{{idvideo}}"></iframe>

Précision : J'ai essayé avec src et ng-src (directive AngularJs), mais je ne parviens pas à afficher cette variable dans ces attributs (alors qu'elle s'affiche parfaitement dans un titre par exemple :

<p>{{idVideo}}</p>

1 réponse

FactureHero.com, il y a 10 ans

J'ai trouvé la solution et je la partage ici si ça peut servir à quelqu'un :
1/ Utiliser ng-src est plus judicieux que l'attribut src (attribut Angular JS)
2/ On ne peut pas afficher une variable dans ng-src
3/ Une solution possible est de créer une fonction spécifique qui retournera l'url youtube et son ID

Voici ce que j'ai mis en place et qui fonctionne.

  • dans le fichier app.js je crée la fonction : angular.module('starter', ['ionic')

.filter('youtubeEmbedUrl', function ($sce) {
return function(videoId) {
return $sce.trustAsResourceUrl('http://www.youtube.com/embed/' + videoId);
};
})

- Puis dans le même fichier, je crée le controller qui chargé de transmettre les données de la vidéo à la vue

.controller('VideoCtrl', function($scope, $ionicLoading, $stateParams, $http){

url = "http://urlDeMaRequeteQuiRetourneUnJson"";
$ionicLoading.show({template: 'Chargement...'});
$http.get(url).success(function(response) {
$ionicLoading.hide();
$scope.video=response; 

            // On initialise la varialbe idVideo et on la transmet à la vue
            $scope.idVideo = response['idvideo']['id'];

});

})

- En enfin j'affiche l'url de la vidéo dans la vue video.html 
 <iframe width="100%" height="auto" ng-src="{{ idVideo | youtubeEmbedUrl }}" frameborder="0"></iframe>
De cette façon, tout fonctionne parfaitement et l'on peut afficher les Urls Youtube, Dailymotion, Vimeo, etc... en créeant une seule fois les fonctions spécifiques. Voilà :)