JS：错误的滑块重定向

Question

我在一家由一些受训者建立网站的公司中工作。 他们仅在公司中使用此网站。

我找回了在我之前工作的见习生的工作，在网站的索引中，他们创建了一个带有图片的滑块，当您单击图片时，带有一个灯箱。

我必须像使用微型滑块一样来做同样的事情，但是当您单击微型滑块时，它将打开一个带有视频的灯箱。

我的问题是：我创建了带有缩图的滑块，但是，当您单击缩图时，灯箱会打开一个视频，但是无论我单击哪个缩图，它都会打开同一视频

这是代码：

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
  }


});

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

Answer 1

我将其发布为答案，因为评论太长了。

您可以解决该问题。

我几乎没有任何AngularJS经验，但是我将解释您需要实现的代码逻辑。

单击时，您在$ scope.video中有3个视频对象

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

你需要打电话给

$('#nameOfElement').click(function(e){})

其中e是Event ，事件将包含所单击视频的ID，您需要将此ID传递给#myModal并选择相关视频（而不是循环浏览所有视频，只需加载一个）。

这个问题可能会有所帮助

将数据传递到引导模式

就我对AngularJS的了解而言，这是尽可能准确的。