слайдер wow не работает при загрузке изображений через http.get в angularjs ng-repeat - PullRequest
Новая
       20

слайдер wow не работает при загрузке изображений через http.get в angularjs ng-repeat

0 голосов
/ 02 марта 2020

Я использую плагин wow slider (jquery) в моем проекте (angularjs и веб-формы asp. net) ... иногда слайдер загружается нормально, но иногда он не загружает изображения в слайдере. Я провел некоторое исследование и узнал, что проблема в том, что изображения загружаются после того, как ползунок wow заполнил и сгенерировал код.

Я пытался вызвать jquery функцию уничтожения старого кода и инициализации ползунка wow ... но не повезло, я не смог добиться результата.

Вот мой код

HTML

<div class="col-xs-12">
    <div class="owl-carousel featuredProductsSlider">
       <div ng-repeat="x in homedata" class="slide">
          <div class="productImage clearfix">
            <img ng-src="{{x.productimage}}" alt="featured">
            <div class="productMasking">
              <ul class="list-inline btn-group" role="group">                       
                <li><a href="cart.aspx" class="btn btn-default">
                    <i class="fa fa-shopping-cart"></i></a></li>
                <li><a href="buy/{{x.productuniqueid}}" class="btn btn-default">
                    <i class="fa fa-eye"></i></a></li>
              </ul>
            </div>
          </div>
          <div class="productCaption clearfix">
            <a href="buy/{{x.productuniqueid}}">
              <h5>{{x.productname}}</h5>
            </a>
            <h3>${{x.price}}</h3>
          </div>
       </div>
    </div>
</div>

angularjs: 

$scope.loadhome = function () {
    $http.post('index.aspx/gethomedata', {  })
    .success(function (data, status, headers, config) {
        //$scope.myData.fromServer = data.d;
        $scope.homedata = data.d;

        if ($scope.homedata.length > 0) {
          // alert("yes");
          $.fn.myFunction();
       }
    })
    .error(function (data, status, headers, config) {
        $scope.status = status;
        //alert($scope.status);
    });
}

Jquery 

jQuery(document).ready(function () {
    $.fn.myFunction = function () {
        alert('You have successfully defined the function!');
        "use strict";
        var owl = $('.owl-carousel.featuredProductsSlider');

        owl.trigger('destroy.owl.carousel');
        owl.html(owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');    
        //owl.empty();
        owl.owlCarousel({
            loop: true, margin: 28, autoplay: true,
            autoplayTimeout: 2000, autoplayHoverPause: true,
            nav: true, moveSlides: 4, dots: false,
            responsive: {
                320: { items: 1 }, 768: { items: 3 }, 992: { items: 4 }
            }
        });       
    }
});

1 Ответ

0 голосов
/ 02 марта 2020

Скорее всего, вы инициализируете wowslider, когда цикл дайджеста не завершен и ng-repeat не завершило загрузку изображений. $ timeout вызовет в следующем цикле дайджеста, вы можете попробовать это. добавить зависимость $ timeout в контроллер 

$http.post('index.aspx/gethomedata', {  })
.success(function (data, status, headers, config) {
    //$scope.myData.fromServer = data.d;

    $scope.homedata = data.d;

    if ($scope.homedata.length > 0) {
      // alert("yes");
      $timeout(function () {
           $('#owl-...').myFunction();
      });
    }
})
.error(function (data, status, headers, config) {
    $scope.status = status;
    //alert($scope.status);
});
...