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 是事件，事件将包含所点击视频的ID，您需要使用此 ID 并将其传递给< em> #myModal 并选择相关视频（而不是循环浏览只需要加载一个视频的所有视频）。

这个问题可能会有所帮助

Passing data to a bootstrap modal

这和我对AngularJS的了解一样准确。

JS：使用滑块重定向错误

1 个答案: