javascript - Angular-Slick 和动态数据未正确初始化

Question

我正在使用angular-slick指令，因为我发现这在大多数情况下最适合我。但是，我仍然无法使用动态数据正确初始化幻灯片。

我有一个下拉列表，用于更新工厂中的 relatedResorts json 对象。我的 Controller 监视此更新并相应地更新scope.latedResorts。一切都很好。

在 slider 更新之前，幻灯片/内容+图像就在那里，看起来可以正常工作。 slick-initialized 类已被应用，多余的幻灯片被隐藏。但它们不会拖动或自动前进，箭头甚至不会显示。

然后，我将图像设为可点击，这样您也可以通过点击其中一张卡片来更新 json 对象。奇怪的是，在单击图像并刷新对象后， slider 实际上工作得更好，但箭头仍然不起作用。您甚至可以拖动 slider 并查看其他幻灯片。

我尝试过 slick 和 unslick (只有在 dom 加载后才起作用，即使应用了 $timeout，看起来有点像 hack)，创建了我自己的指令和 $timeout。我绞尽脑汁想弄清楚这个问题。

请帮忙...

HTML:

<slick class="row slider" arrows="true" responsive="breakpoints" slides-to-show=3 slides-to-scroll=1 dots="false" infinite="true" speed="300" touch-move="false" ng-if="relatedResorts.length" init-onload=true data="relatedResorts">
    <div class="card col-md-4 col-sm-6 col-xs-12" ng-repeat="option in relatedResorts" ng-click="resetResort(option.id)">
        <div class="img-container"> 
                <div class="banner">
                <p>{{option.resort_name}}</p>
            </div>
            <img ng-src="assets/images/resorts/{{option.id}}/{{option.resort_img}}" alt="Luxury Resort: {{option.resort_name}}"/>
        </div>
    </div>
</slick>

Controller :

resortModule.controller('relatedResortsController', ['$scope', 'locaService', '$timeout', function($scope, locaService, $timeout) {
    $scope.relatedResorts;
    $scope.resort;
    $scope.getRelated = function (resort) {
        //Resorts in location/destination on location change
        locaService.fetchRelatedResorts(resort).then(function(result) {
            $scope.relatedResorts= result;
        });
    }
    $scope.resetResort= function(resort){
        //reset resort for app when related resort image is clicked on. 
        $scope.resort= resort;
        locaService.updateResort(resort);
        /*$(".slider").slick('unslick');
        $(".slider").slick();*/
    }

    //watches factory for updates to objects
     $scope.$on('resortUpdated', function() {
        $scope.resort = locaService.resort;
        $scope.getRelated($scope.resort);
    });
}]);

Answer 1

好吧，我感觉很羞涩。当然，在我发布问题后我就找到了答案。我没有足够长的物体被返回，并且因为那个光滑的东西没有向我显示箭头。但由于某种原因，一旦对象更新，箭头就会显示。我尝试了一个不同的对象，它的效果如我所料。我仍然不知道为什么箭头不起作用，但我只是切换了 slick-theme.css 文件中的图标，这对我来说效果很好。不管怎么说，多谢拉!