0

我在我的项目（angularjs 和 webforms asp.net）中使用哇滑块插件（jquery）...有时滑块加载正常，但有时它不会加载滑块中的图像。我做了一些研究，发现问题是在 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>

角js：

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

1 回答 1

0

当摘要循环未完成且 ng-repeat 尚未完成加载图像时，您很可能正在初始化 wowslider。$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);
});
于 2020-03-02T10:58:26.817 回答