光滑的滑块不适用于 ng-repeat答案

【问题标题】：Slick slider is not working with ng-repeat光滑的滑块不适用于 ng-repeat
【发布时间】：2017-07-18 09:57:47
【问题描述】：

我对 Slick 轮播有疑问。它不适用于 ng-repeat。如果我删除 ng-repeat 一切都会正常工作。

<section class="regular slider">
    <div ng-repeat="x in category">
      <img src="http://placehold.it/350x300?text=1">
    </div> 
</section>

我的 Angular 应用程序是。

<script>
    var app = angular.module('EntityApp', []);
    app.controller('EntityAppCntroller', function($scope, $http, $window) {         

          $http.get('http://www.abcdef.com:555/OpenApi/GetAllCategories', {
          }).success(function(response){
                $scope.category = response.res;                 
          });
    });
  </script>

光滑的滑块设置是：

<script type="text/javascript">
    $(document).on('ready', function() {
      $(".regular").slick({
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
</script>

我得到了类似的输出..

[Image 1]
[Image 2]
[Image 3]
[Image 4]

我想要的 Inseat < [Image 1] [Image 2] [Image 3] >

【问题讨论】：

您为什么要尝试使用document.ready 和angularJs。更好的是，您可以使用具有 slick 指令的模块。例如：github.com/vasyabigi/angular-slick
为什么它不起作用。？
jQuery 在它之前加载。您可以尝试使用timeout，但它不喜欢使用angualrJs 的方式。
好的，你能用我的代码演示超时吗？
做一件事，如果你不想使用那些指令。尝试在设置timeout 的位置创建自己的指令。看到这个github.com/vasyabigi/angular-slick/issues/2这里有人通过创建自己的自定义指令来设置时间来解决你的问题。

标签： angularjs angularjs-ng-repeat slick.js

【解决方案1】：

将 $timeout 注入控制器，创建一个名为 initSlider 的函数，然后在成功回调中写入 $timeout(initSlider);

$timeout 将其中的任何回调抛出到调用堆栈的底部，因此可以保证在 ng-repeat 渲染后触发。如果您使用的是图像，则需要将其与 imagesLoaded 插件配对，以确保 Slick 可以正确调整自身大小。

观看this 升级。

祝你好运！

【讨论】：

【解决方案2】：

如果 $timeout 不起作用，请尝试使用“ng-if”。

<section class="regular slider" ng-if="category.length > 0">
  <div ng-repeat="x in category">
    <img src="http://placehold.it/350x300?text=1">
  </div> 
</section>

谢谢

【讨论】：

【解决方案3】：

在通过 Angular Js 加载数据后尝试调用 slick 函数。这里我举个简单的例子。

在 angularJs 控制器中：

   $scope.getdata = function(){ 
                var url = "http://www.abcdef.com:555/OpenApi/GetAllCategories";
                $http.get(url).then(function (response) {
                       setTimeout(sli,2);//calling sli function 
                }); <br/>
            }<br/>

在您的脚本中创建一个新函数：

<script>
function sli(){ 
$(".regular").slick({ 
        dots: true, 
        infinite: true, 
        slidesToShow: 3,
        slidesToScroll: 3 
      }); 
} 
</script>

【讨论】：