猫头鹰轮播填充了我的多次重复重复

Question

我正在尝试初始化一个使用两个ng-repeats来填充它的猫头鹰轮播。一个包含视频网址和其他图像。

<div class="col-xs-6 col-sm-6 col-md-7 full-screen" ng-if="showCarousel">
  <owl-carousel
     id="owl-carousel-{{prefix}}-{{item.id}}"
     class="owl-carousel"
     data-options="{responsive: true,
                   mouseDrag: false,
                   lazyLoad: true,
                   video: true,
                   items: 4,
                   itemsDesktop: [1199, 3],
                   itemsDesktopSmall: [992,2],
                   itemsMobile: [479,1]}">
    <div ng-repeat="video in item.videos track by $index"
         class="cover-image">
      <iframe class="lazyOwl embed-video"
        src="{{item.video_url(video.url)}}" frameborder="0">
      </iframe>
    </div>
    <div ng-repeat="image in item.images track by $index" class="pointer cover-image"
         ng-click="toggleAuction(item)" owl-carousel-item>
      <img class="lazyOwl" owl-data-src="{{is_mobile_device() ? image.small_url : image.web_small_url}}"></img>
    </div>
  </owl-carousel>
</div>


.directive("owlCarousel", function() {
return {
  restrict: 'E',
  transclude: false,
  link: function(scope, element, attrs) {
    scope.initCarousel = function() {
      // provide any default options you want
      var defaultOptions = {
        autoPlay: false,
        pagination: false,
        slideSpeed: 250,
        transitionStyle: 'fade',
        navigation: true,
        responsiveRefreshRate: 0,
        navigationText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>']
      };

      var customOptions = scope.$eval($(element).attr('data-options'));
      // combine the two options objects
      for (var key in customOptions) {
        if(customOptions.hasOwnProperty(key)){
          defaultOptions[key] = customOptions[key];
        }
      }

      // init carousel
      $(element).owlCarousel(defaultOptions);
    };
  }
};
})
.directive('owlCarouselItem', [function() {
    return {
      restrict: 'A',
      transclude: false,
      link: function(scope, element) {
        // wait for the last item in the ng-repeat then call init
        if (scope.$last) {
          scope.initCarousel();
        }
      }
    };
  }])

旋转木马正在启动，但当我缩小屏幕时，视频不在那里而只有图像。

我将owl-carousel-item指令仅添加到最后一次ng-repeat，因为我希望在完成图像后将其初始化。但我认为这意味着当我缩小屏幕并且响应时视频在技术上不属于旋转木马。

我面临的问题是我必须使用2 ng重复，因为我有两个不同的数据集，我用它来填充轮播，而它通常的工作方式只有一个ng-repeat。