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

Posted 2023-05-09

【中文标题】如何使用 ng-repeat 使 bxSlider 在 AngularJS 中工作？

【英文标题】：How to make bxSlider work in AngularJS with ng-repeat?

【发布时间】：2019-09-07 00:01:18

【问题描述】：

我正在尝试更新从 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/

【问题讨论】：

这是一个 plunker（不是我的），它演示了如何为 bxSlider 创建自定义指令：embed.plnkr.co/wrk9cU

@Pop-A-Stash 感谢您的重播。但是指令可以很好地处理硬编码的 JSON 数据，如您的演示中所示。当谈到从 asp.net web 服务中获取数据时，问题仍然存在。有没有我遗漏的方法？

我修改了前面的示例以观察slideit 属性，以便在获取新的一天时正确创建和销毁滑块：next.plnkr.co/edit/UBaGrfDAfrVa6eJN

【参考方案1】：

在此处查看此示例：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();
    
  );
,