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

Question

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

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

Вот мой код

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 }
            }
        });       
    }
});

Answer 1

Скорее всего, вы инициализируете 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);
});