[Résolu] Mauvaise redirection d'un carrousel

Bonjour,

Tout d'abord, je tiens à préciser que je suis en stage en entreprise,

héritant du travail laborieux d'ancien stagiaires, je dois apporter des modifications sur un des sites que l'entreprise utilise en interne,

Ayant que très peu de notion en Javascript / AngularJS, j'ai essayé de décortiquer le code afin de le comprendre.

Mon problème est le suivant : il existait un carrousel/slider d'image sur la page d'accueil, ainsi qu'une vidéo. La demande est de crée un carrousel des miniatures de ces vidéos (ce que j'ai réussi à faire), mais cependant, quand je clique sur une miniature elle devrait "ouvrir" la vidéo sur la page, le problème est que chaque miniature envoie vers la même vidéo.

Je me doute bien que le soucis est entre mon clavier et ma chaise, mais je n'arrive pas à le trouver, voici les différents bouts de code qui vous seront je pense nécessaire :


HTML :

<div class="col-lg-5 col-md-5 col-sm-6 col-xs-12 contVideo">
            <div>
              <div class="video" ng-controller="videoCtrl">
                <slick class="carousel" infinite="true" settings="slickConfig">
                <div ng-repeat="data in video" class="contentVideo" ng-style="{'background-image':'url({{data.miniature}})'}">
                  <a data-toggle="modal" data-target="#myModal">
                    <img ng-src="images/index/video/BoutonPlay.png" alt="Play" />
                  </a>
                  <div class="descriptionVideo">
                    <p>{{data.legende}}</p>
                  </div>
                </div>
           </slick>
                <div class="modal fade" id="myModal" ng-repeat="data in video">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button ng-attr-type="button" class="close" data-dismiss="modal">x</button>
                      </div>
                      <div class="modal-body">
                     <video id="video1" ng-src="{{data.src}}" controls="controls" width="550px" height="300px" poster="{{data.miniature}}" preload="metadata"></video>
                      </div>
                    </div>
                  </div>
                </div>
 
              </div>
            </div>
          </div>

Controlleur :

// VideoCtrl.js
app.controller("videoCtrl", function($rootScope, $scope, $window) {
 
  // INFORMATION GENERAL VIDEO
  // legende = "resume" ou titre de la video
  // src = adresse de la video
  // miniature =  background video
  $scope.video = [
    {
      "legende": "CECI EST LA VIDEO 1",
      "src": "images/index/video/video1.mp4",
      "miniature": "images/index/video/videoMiniature.png"
    },
    {
      "legende": "CECI EST LA VIDEO 2",
      "src": "images/index/video/video2.mp4",
      "miniature": "images/index/video/miniature2.png"
    },
    {
      "legende": "CECI EST LA VIDEO 3",
      "src": "images/index/video/video3.mp4",
      "miniature": "images/index/video/miniature3.jpg"
    }
 
  ];
 
  // reinitialise le scroll au changement de vue
  $rootScope.$on('$routeChangeSuccess', function() {
    var interval = setInterval(function() {
      if (document.readyState == 'complete') {
        $window.scrollTo(0, 0);
        clearInterval(interval);
      }
    }, 10000);
  });
 
  // Scope slider + img slider + config slider
  $scope.slickConfig = {
    prevArrow: '<img src="images/index/slider/prev.png"class="slick-prev"/>',
    nextArrow: '<img src="images/index/slider/next.png"class="slick-next"/>',
    autoplay: true,
    draggable: true,
    autoplaySpeed: 10000      //1000 egal 1 second
  }
 
 
});

Il y a surement des erreurs et/ou des choses en trop, j'avoue avoir repris le code des anciens stagiaires qui avaient déjà fait un carrousel sur cette même page et essayé d'adapter au besoin,

Je reste disponible pour toutes questions,

Un grand merci à vous

Hello et bienvenu,

Même si je pense que les questions que tu poses ici devraient être posées à ton maître de stage j'ai vu 2-3 trucs qui empêchent ton script de correctement fonctionner.

Dans ta première boucle, tu ne mets pas à jour le "data-target" qui doit correspondre à un id unique dans ta page ; c'est le principe des modals de Bootstrap.

De même dans ta 2è boucle, il faut mettre à jour l'id de la modal et optionnellement l'id de ta video si ça te sert ensuite.

Pour faire ça, tu as 2 solutions : soit tu ajoutes une entrée 'id' dans ton tableau $scope.video à chaque vidéo ou bien tu utilises l'index de ta boucle comme ça :

<div ng-repeat="(key, value) in data">

Il faut absolument que les id dans une page soient uniques !

Je te laisse revoir ton code et revenir vers nous

Bonjour MatthieuR,

Tout d'abord un grand merci pour ta réponse, sur la petite dizaine de forums où j'ai posté mon message, tu es le seul à m'avoir répondu (je commençais réellement à désespérer),

Le problème est que mon tuteur de stage n'est pas du tout développeur web et ce n'est pas son domaine, le site sur lequel je travail est le résultat de différents stagiaires.

Si j'ai bien compris ton message, c'est le data-target de cette ligne :

 <a data-toggle="modal" data-target="#myModal"> 

que je ne mets pas à jour ?

Cependant, si j'ai bien compris, ce data-target me permet de "repointer" ici :

<div class="modal fade" id="myModal" ng-repeat="data in video">

j'ai donc essayé de mettre un id dans mon $scope.video pour chaque vidéo (comme ceci) :

$scope.video = [
    {
      "id" : 1,
      "legende": "CECI EST LA VIDEO 1",
      "src": "images/index/video/video1.mp4",
      "miniature": "images/index/video/videoMiniature.png"
    },
......

et modifier la ligne

<div class="modal fade" id="myModal" ng-repeat="data in video">

en

<div class="modal fade" id="myModal" ng-repeat="(key, value) in video">

cependant, au lieu de m'afficher tout le temps la première vidéo, ça ne m'affiche plus aucune vidéo (les miniatures sont toujours là, je peux cliquer dessus, un lecteur de vidéo s'ouvre mais aucune vidéo n'est lu)

Je suis certain qu'un élément m'échappe ou que j'ai mal compris ton explication,

Merci beaucoup encore une fois,

Tu avances, c'est pas mal, mais il faut que tu modifies les 2 références à tes identifiants.
Tu vois que data-target appelle l'id de ta class "modal", et il faut que ces id soient uniques.
Donc, il faut que tu remplaces "myModal" par "video-{{data.id}}" par exemple:

<div class="modal fade" id="video-{{data.id}}" ng-repeat="data in video">

Pour ce dernier, tu n'as pas besoin de la clé de ta boucle, tu ne t'en sers car tu as choisi d'ajouter un id dans les éléments de $scope.video.
Et

<a data-toggle="modal" data-target="#video-{{data.id}}">

Un grand merci à toi MatthieuR, vraiment, j'ai tellement galérer, si y'a quelque moyen de te remercier n'hésite pas !

De rien, du coup ça fonctionne comme tu veux alors ?