javascript - 初始化时 Owl-Carousel 超大图像

Question

我在尝试使用 AngularJS 加载 Owl Carousel 时遇到了一个奇怪的问题。

我使用以下 ng-repeat 创建我所有的幻灯片:

<div class="owl-carousel owl-theme" id="newsCarousel" banner-container>
    <img class="img-fluid" ng-src="{{banner.URL}}"
         ng-repeat="banner in vm.banners" banner-card>
</div>

然后使用这些指令初始化轮播:

app.directive('bannerCard', function ($timeout){
    return function(scope, element, attrs){
        if(scope.$last)
            return $timeout(function(){
                scope.$emit('LastBannerRendered');
            });
    };
});
app.directive('bannerContainer', function ($timeout){
    return function(scope, element, attrs){
        $timeout(function(){
            scope.$on('LastBannerRendered', function(event){
                $('#newsCarousel').owlCarousel({
                    autoplay: true,
                    loop:true,
                    autoplayTimeout: 5000,
                    items: 1,
                    nav: true,
                    dots: false,
                    navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"]
                });
            });
        });
    }
}); 

到目前为止，我已经多次执行此操作(同一页面中还有 2 个其他轮播是这样完成的，并且 100% 正常工作)但是这个特定的轮播似乎无法正常工作，问题是初始化时幻灯片的高度超过 2000 像素，这是一个破坏整体 View 的离谱数量。

当我通过控制台初始化旋转木马时，它不会变得太大，但它没有溢出:隐藏，因此所有幻灯片都一个接一个地显示。

我在这里遗漏了什么导致这个特定的轮播出现这样的行为？

添加更多细节:图像最初以正确的大小加载，我可以看到它们大约一秒钟，之后应用了一些样式，使它们具有这个大小。

Answer 1

在我下面的例子中没有出现这个问题，这可能是由于 Owl Carousel 的某些属性设置不正确，你也可以将主轮播的 height 设置为你想要的高度使用内联样式。

我已经对您的指令进行了一些更正，如果您愿意，可以忽略它们，请检查我的示例并将其实现到您的代码中。

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  this.banners = [{
    URL: "http://via.placeholder.com/350x150"
  }, {
    URL: "http://via.placeholder.com/350x150"
  }, {
    URL: "http://via.placeholder.com/350x151"
  }, {
    URL: "http://via.placeholder.com/350x152"
  }, {
    URL: "http://via.placeholder.com/350x153"
  }, {
    URL: "http://via.placeholder.com/350x154"
  }, {
    URL: "http://via.placeholder.com/350x155"
  }];
  this.owl1 = {
    navigation: true,
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true,
    transitionStyle: 'fade'
  };
  this.owl2 = {
    autoplay: true,
    loop: true,
    autoplayTimeout: 5000,
    items: 1,
    nav: true,
    dots: false,
    navText: ["<i class='fa fa-chevron-left'></i>", "<i class='fa fa-chevron-right'></i>"]
  };
});
app.directive('bannerCard', function($timeout) {
  return {
  restrict: 'A',
  controller: 'MyController',
  link: function(scope, element, attrs, ctrl) {
    if (scope.$last)
      element.parent().owlCarousel(ctrl[attrs.bannerCard]);
  }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<div ng-controller='MyController as vm' ng-app="myApp">
  <div class="owl-carousel owl-theme" id="newsCarousel" style="width:350px">
    <img class="slide" ng-src="{{banner.URL}}" ng-repeat="banner in vm.banners" banner-card="owl1">
  </div>
  <div class="owl-carousel owl-theme" id="newsCarousel">
    <img class="slide" ng-src="{{banner.URL}}" ng-repeat="banner in vm.banners" banner-card="owl2">
  </div>
</div>