angularjs - Jquery slick 不适用于 ng-repeat

Question

我需要使用 slick 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>

Angular Controller 代码:

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 的情况下显示，slick 工作正常。任何人都知道这有什么问题吗？

Answer 1

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

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

在没有设置时间的情况下运行 $timeout() 会使其等待摘要完成运行(在这种情况下呈现 ng-repeat 项目)。

...是我最好的猜测。如果你把它扔到 jsfiddle 中，肯定会更容易说出来。