Question

我需要使用光滑的jquery插件显示一组图像。在这里，我使用ng-repeat来获取图像集。我的jquery代码是：

$('.multiple-items').slick({
      infinite: true,
      slidesToShow: 4,
      slidesToScroll: 4,
        arrows:true,
        responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });

我的观看代码：

<div class="smilar_cars">
                    <div class="container">
                        <div class="row">
                            <div class="btm_slider">
                                <div class="slider multiple-items">
                                    <div class="col-lg-3  col-md-3 col-sm-3 col-xs-12" ng-repeat="model in similarModels">
                                        <div class="car_info">
                                            <div class="car_img">
                                                <img src="/Content/Models/{{model.ModelBigImage}}" alt="" />
                                            </div>
                                            <h3>{{model.ManufacturerName}}</h3>
                                            <h2>&pound;{{model.BusinessPrice}}</h2>
                                            <span class="tag">Model: {{model.ModelName}}</span>
                                            <span class="details_link no_bg">
                                                <a href="/Deal/{{model.ModelName}}">DETAILS</a>
                                            </span>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>

角度控制器代码：

app.controller('BaseController', ['$scope', '$http','$timeout', function ($scope, $http, $timeout) {
    $scope.bannerIds = [];
    $scope.similarModels = [];
    $scope.getManufacturerList = function () {

        $http.get('/Home/GetManufacturerList').success(function (response) {
            $scope.manufacturerList = response;
        })
        .error(function (data) {
            console.log(data);
        });
    }

    $scope.getBanners = function () {
        $http.get('/Home/GetBanners').success(function (response) {
            $scope.banners = response;
            angular.forEach($scope.banners, function (value, key) {
                $scope.bannerIds.push(value.ModelID);
            });
            $http.get('/Home/GetSimilarModelsofBanners', { params: { 'id': $scope.bannerIds } })
          .success(function (response) {              
              $scope.similarModels = response;
              console.log($scope.similarModels);
          })
          .error(function (data) {
              console.log(data);
          });
        })
        .error(function (data) {
            console.log(data);
        });       
    }


}]);

在这里，我需要显示$ scope.similarModels数据。如果我显示没有ng-repeat，光滑的工作正常。任何人都知道这有什么问题吗？

Answer 1

您的jQuery代码需要在success来电GetSimilarModelsofBanners回调中运行。但即使这样，一旦定义了$ scope.similarModels，你需要给Angular一些时间来渲染Slick使用的DOM元素。因此注入$ timeout并在success回调中有一个超时函数来初始化Slick。

$timeout(function () {
    $('.multiple-items').slick(params);
});

在没有设置时间的情况下运行$ timeout（）会使它等到摘要运行完毕（在这种情况下渲染ng-repeat项目）。

...是我最好的猜测。如果你把它扔进一个jsfiddle，那肯定会更容易说。

Answer 2

试试这个，它对我有用。

angular.module([sth]).directive('slick', function($timeout) {
return function(scope, sample, attrs) {
  $timeout((function() {
    sample.slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      dots: true,
      infinite: true,          
    })
  }), 100)
}

})

<slick init-onload="true">
<div ng-repeat="image in imageTest">
  <img ng-src="{{image.imageURL}}">
</div>

Jquery光滑不适用于ng-repeat

2 个答案: