Question

当尝试使用AngularJS加载猫头鹰轮播时，我遇到了一个奇怪的问题。

我使用以下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像素，这太高了，破坏了整体视图。

当我通过控制台初始化轮播时，轮播不会变得太大，但没有溢出：隐藏，因此所有幻灯片都一张一张显示。

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

添加更多详细信息：图像最初加载时具有正确的大小，我可以看到它们大约一秒钟，然后才应用某种样式赋予它们这种大小。

Answer 1

在我的以下示例中该问题没有发生，这可能是由于猫头鹰轮播的某些属性设置不正确造成的，您还可以通过使用内联样式将主轮播的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>

猫头鹰轮播初始化时图像过大

1 个答案: