Owl-Carousel在初始化时放大图像

Question

我在尝试用AngularJS加载一个owl转盘时遇到了一个奇怪的问题。

我用下面的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>

然后使用以下指令初始化carousel：

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>"]
                });
            });
        });
    }
}); 

到目前为止，我已经做了很多次了(在同一页面中还有另外两个旋转木马像这样做，并且100%正常工作)，但是这个特定的旋转木马似乎不能正常工作，问题是当初始化幻灯片时，幻灯片的高度超过2000px，这是一个令人震惊的数量，破坏了整体视图。

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

我在这里遗漏了什么，导致这个特定的旋转木马表现成这样？

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

Answer 1

这个问题不会出现在我下面的例子中，这可能是由于owl轮播的某些属性设置不正确，你也可以通过使用内联样式将主轮播的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>

​