如何使用ng-repeat使bxSlider在AngularJS中工作？

Posted 2021-04-09

我正在尝试更新现有的动态网页，该网页从SQLServer数据库获取图像和标题，该数据库加载到AngularJS ng-repeat中。 bxSlider可以很好地处理静态数据，但是当涉及使用ng-repeat从web服务获取的数据时，它只显示为图像列表。

我尝试在页眉，页脚和bxSlider div之后使用以下脚本。但它不起作用。

$(window).load(function () {
    $(function () {
        $('.bxslider').load(function () {
            $('.bxslider').bxSlider({
                speed: 500,
                auto: true,
                captions: true,
                slideWidth: 800
            });
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<!-----bxSlider html Code----------------->
<div class="bxslider" ng-controller="appCtrl">
    <div ng-repeat="tops in topStories">
       <a ng-href="article.html?url={{tops.articleURL}}">
        <img ng-src="{{tops.imageURL}}" title="{{tops.title}}">
       </a>
     </div>
</div>

加载数据后，bxSlider未应用于控制器。我怎样才能解决这个问题以获得完美的滑块？ https://bxslider.com/examples/image-slideshow-captions/

答案

请在此处查看此示例：http://next.plnkr.co/edit/UBaGrfDAfrVa6eJN将数据移至异步服务以模拟Web服务调用。我拨打两个电话，相隔5秒钟来模拟新数据。当范围被销毁时，请务必清理滑块对象。

关键部分是这个链接功能。 scope.$watch slideit属性的变化，并使用$timeout()强制消化周期。

link: function(scope, elm, attrs) {
  var slider;
  scope.$watch('slideit', function() {
    if(slider) {
      slider.destroySlider();
    }
    scope.bestDeals = scope.slideit;
    if (scope.bestDeals && scope.bestDeals.length > 0) {
      $timeout(function() {
        slider = elm.bxSlider({
          captions: true,
          auto: true,
          autoControls: true,
          slideWidth: 110,
          minSlides: 1,
          maxSlides: 6,
          moveSlides: 1,
          slideMargin: 10,
          pager: false,
          autoHover: true,
        });
      });
    }
  });

  scope.$on('destroy', function() {
    if (slider) {
      slider.destroySlider();
    }
  });
},