Question

我的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>

我的角色应用是。

<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]

Insteat我想要< [Image 1] [Image 2] [Image 3] >

Answer 1

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

$ timeout将其内部的任何回调抛出到callstack的底部，以便在ng-repeat呈现后保证触发。如果您正在使用图片，则需要将其与imagesLoaded插件配对，以确保Slick可以正确调整尺寸。

观看this以升级。

祝你好运！

Answer 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>

谢谢

Answer 3

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

在angularJs控制器中：

scala> import cats.syntax.all._
import cats.syntax.all._

scala> val good = 123.rightNel[String] :: "abc".rightNel[String] :: HNil
good: Either[cats.data.NonEmptyList[String],Int] :: Either[cats.data.NonEmptyList[String],String] :: shapeless.HNil = Right(123) :: Right(abc) :: HNil

scala> val bad = "error 1".leftNel[String] :: "error 2".leftNel[Int] :: HNil
bad: Either[cats.data.NonEmptyList[String],String] :: Either[cats.data.NonEmptyList[String],Int] :: shapeless.HNil = Left(NonEmptyList(error 1)) :: Left(NonEmptyList(error 2)) :: HNil

scala> parSequence(good)
res3: Either[cats.data.NonEmptyList[String],Int :: String :: shapeless.HNil] = Right(123 :: abc :: HNil)

scala> parSequence(bad)
res4: Either[cats.data.NonEmptyList[String],String :: Int :: shapeless.HNil] = Left(NonEmptyList(error 1, error 2))

在脚本中创建新功能：

   $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/>

光滑滑块不适用于ng-repeat

3 个答案: