2016-06-08 71 views
0

當我使用動態數據加載光滑內容時,所有圖像都會一個在另一個之下。我不知道爲什麼會發生。我如何解決它?看起來DOM本身就需要初始化數據。Slick Carousel Angular - 動態數據加載

查看:

<slick infinite=true slides-to-show=3 slides-to-scroll=3 settings="slickConfig" data="images"> 
 
    <div class="slick-item" ng-repeat="image in images"> 
 
     <div class="Slide-Id"> 
 
      <p class="slide-id">{{images.indexOf(image)+1}}/{{images.length}}</p> 
 
     </div> 
 
     <img src="{{image.url}}" height="100px" width="100px" /> 
 
    </div> 
 
</slick>

// $scope.images = [ { 
 
     //  url: '../../images/qr-code.png' 
 
     // }, { 
 
     //  url: '../../images/qr-code.png' 
 
     // }, { 
 
     //  url: '../../images/qr-code.png' 
 
     // }, { 
 
     //  url: '../../images/qr-code.png' 
 
     // }, { 
 
     //  url: '../../images/qr-code.png' 
 
     // }]; 
 
\t 
 
\t //Hard coded values above loads properly as expected. But if it comes from server and then, 
 
\t //it loads one below the other. 
 
\t 
 
\t 
 
\t $scope.images = []; 
 

 
     $scope.slickConfig = { 
 
     //enabled: true, 
 
     //autoplay: false, 
 
     //draggable: true, 
 
     // method: {}, 
 
     arrows: false, 
 
     //centerMode:true, 
 
     //variableWidth: true, 
 
     event: { 
 
      beforeChange: function (event, slick, currentSlide, nextSlide) { 
 
      }, 
 
      afterChange: function (event, slick, currentSlide, nextSlide) { 
 
      } 
 
     } 
 
     }; 
 
\t 
 
\t ... 
 
\t \t \t \t var data = ServiceFactory.getEventDetails(); 
 
\t \t \t \t data 
 
       .then(onAuthenticated) 
 
       .catch(onRejectedRequest) 
 
       .finally(sessionServiceFinally); 
 
\t \t \t \t 
 
\t \t \t \t .... 
 
\t \t \t \t 
 
\t \t \t \t onAuthenticated(resp){ 
 
\t \t \t \t \t console.log("vm.tickets[i].images.." + resp[0].images); 
 
\t \t \t \t \t $scope.images.push({url : resp[0].images}); 
 
\t \t \t \t \t $scope.images.push({url : resp[0].images}); 
 
\t \t \t \t \t $scope.images.push({url : resp[0].images}); 
 
\t \t \t \t \t 
 
\t \t \t \t } 
 
\t

回答

0

我終於結束了使用NG-如果這個解決:)