Как заставить bxSlider работать в AngularJS с помощью ng-repeat? - PullRequest
Новая
       23

Как заставить bxSlider работать в AngularJS с помощью ng-repeat?

1 голос
/ 16 апреля 2019

Я пытаюсь обновить существующую динамическую веб-страницу, которая получает изображения и заголовки из базы данных SQLServer, загруженной в AngularJS ng-repeat.bxSlider отлично работает со статическими данными, но когда дело доходит до данных, извлекаемых из веб-сервисов с помощью ng-repeat, он отображается в виде списка изображений.

Я попытался использовать следующий скрипт в заголовке, нижнем колонтитуле и сразу после div bxSlider.Но это не сработало. 

$(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/

1 Ответ

0 голосов
/ 18 апреля 2019

См. Этот пример здесь: http://next.plnkr.co/edit/UBaGrfDAfrVa6eJN Данные перемещаются в асинхронную службу для имитации вызова веб-службы. Я делаю два звонка с интервалом в 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();
    }
  });
},
...