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

【问题标题】：How to make bxSlider work in AngularJS with ng-repeat?如何使用 ng-repeat 使 bxSlider 在 AngularJS 中工作？
【发布时间】：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

标签： jquery angularjs angularjs-ng-repeat bxslider

【解决方案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();
    }
  });
},

【讨论】：