Jquery slick 不适用于 ng-repeat答案

【问题标题】：Jquery slick is not working with ng-repeatJquery slick 不适用于 ng-repeat
【发布时间】：2016-09-05 08:19:01
【问题描述】：

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

角度控制器代码：

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 工作正常。有人知道这有什么问题吗？

【问题讨论】：

你能发布你的 Angular 控制器代码吗？
使用 github.com/vasyabigi/angular-slick 代替，尝试使用 jQuery 插件以及 ng-repeat 或类似的插件注定会失败。
抱歉，我们不能使用那种棱角分明的光滑。因为，它要求安装凉亭。除了这个，还有其他选项可以解决这个问题吗？
你可以去 angular-slick repo 并从 dist/slick.min.js 复制或下载代码。该插件已在 Bower 注册，但这不是获得它的唯一方法

标签： angularjs slick.js

【解决方案1】：

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

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

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

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

【讨论】：

天哪，这条评论让我的头疼得厉害，谢谢！

【解决方案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>
</slick>

【讨论】：