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

角度コントローラコード：この中

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

GetSimilarModelsofBannersコールでは、jQueryコードをsuccessコールバックで実行する必要があります。しかし、それでも$ scope.similarModelsが定義されると、Slickが使用するDOM要素をレンダリングするためにAngularに時間を与える必要があります。そこで$ timeoutを挿入し、successコールバックには、Slickを初期化するタイムアウト機能があります。時間が設定されていない

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

実行$タイムアウトは、（）ダイジェストは、（この場合はNG-リピートアイテムをレンダリング）を実行して行われるまで待つことができます。

...私の最高の推測です。これをjsfiddleに投げれば、確かに言うのが簡単になります。