Question

我使用ng-repeat实现了带有角度轮播包的滑块。它工作正常，但它在旋转木马末端添加了一个额外的空白幻灯片。我在网上搜索，其他人有类似的错误，因为他们的旋转木马末端有一个额外的元素，但我的代码中没有这样的东西。当我在浏览器中检查dom时，我没有看到额外的元素。

我正在使用指令将旋转木马的高度设置为最高的图像，但无论我是否使用指令，它都有相同的问题。一切都按照我想要的方式工作，除了旋转木马末端的额外滑动。

我会在下面粘贴我的代码，如果您需要更多信息或说明，请与我们联系。

提前感谢所有帮助！

模板如下所示：

<!-- Begin Image section/slider -->
<div data-ng-show="isCurrentPage('/')" data-ng-controller="HeaderController" data-ng-init="getSiteStyle();" class="clearfix">
  <ul rn-carousel rn-carousel-controls-allow-loop rn-carousel-controls rn-carousel-auto-slide="3" data-slider-directive id="upcoming-events-carousel" class="image" style="margin-left:0;margin-bottom:0;">
    <li data-ng-repeat="futureEvent in futureEvents" data-ng-if="futureEvent.eventHomepageImage">
      <div outer-height class="layer" data-slider-slide-directive>
        <a href="/{{futureEvent.eventUrl}}">
          <img class="carousel-img" data-ng-src="/app/uploads/{{ futureEvent.eventHomepageImage }}" />
        </a>
      </div>
    </li>
  </ul>
</div>

sliderSlideDirective看起来像这样：

'use strict';

const jQuery = require('jquery');

const sliderSlideDirective = (app) => {
  app.directive('sliderSlideDirective', ['$timeout',
    function($timeout) {
      const sliderSlideDirectiveDefinitionObject = {
        restrict: 'A',
        scope: true,
        link: function postLink(scope, element, attrs) {
          $timeout(function() {
            //get height of current slide in list and push the height into the height array
            let elemHeight = jQuery(element[0]).height();
            //push that height onto array of heights from parent scope
            scope.$parent.sliderImgsHeights.push(elemHeight);
            //assign the tallest height in array to newHeight variable using es6 spread operator
            let newHeight = Math.max(...scope.$parent.sliderImgsHeights);
            jQuery('#upcoming-events-carousel').height(newHeight);

          });
        }
      };
      return sliderSlideDirectiveDefinitionObject
    }
  ])
};

module.exports = sliderSlideDirective;;

控制器如下所示：

'use strict';

const HeaderController = (app) => {
  app.controller('HeaderController', ['$scope', '$http', 'headerRESTResource',
    function($scope, $http, resource) {
      $scope.errors = [];
      $scope.siteStyle = [];
      $scope.sliderImgsHeights = [];

      let SiteStyle = resource();

      $scope.getSiteStyle = () => {

        SiteStyle.getSiteStyle(function(err, data) {
          if (err) {
            return $scope.errors.push({
              msg: 'could not retrieve team members'
            });
          };

          $scope.siteStyles = data;
        })


      };

    }
  ])
}

module.exports = HeaderController;

Answer 1

经过一些实验，我发现问题是我返回的数组中的某些项目使幻灯片的图像值为null，因此没有创建幻灯片，我认为将由data-ng-if="futureEvent.eventHomepageImage"处理，但图像的null项目仍然会添加到数组的长度，而角度轮播使用数组的长度来制作幻灯片的偏移量。因此，即使它没有添加空白幻灯片，由于数组的长度，角度轮播添加了额外的填充以解释那里没有的图像。

为了修复它，我循环遍历数组并将那里的图像推入一个新数组并返回包含图像的新数组以制作轮播。

希望这可以帮助遇到同样问题的其他人:-)

angular-carousel在旋转木马末端增加了额外的空滑动

1 个答案: