Slick Carousel Angular - 动态数据加载

Question

当我使用动态数据加载光滑内容时，所有图像都会一个接一个地出现。我不知道为什么会这样。我该如何解决？看起来DOM在初始化时需要数据。

查看：

<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'
      //   }];
	  
	  //Hard coded values above loads properly as expected. But if it comes from server and then,
	  //it loads one below the other.
	  
	  
	  $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) {
            }
        }
      };
	  
	  ...
				var data = ServiceFactory.getEventDetails();
				data
                 .then(onAuthenticated )
                 .catch(onRejectedRequest)
                 .finally(sessionServiceFinally);
				 
				 ....
				 
				 onAuthenticated(resp){
					 console.log("vm.tickets[i].images.." + resp[0].images);
					  $scope.images.push({url : resp[0].images});
					  $scope.images.push({url : resp[0].images});
					  $scope.images.push({url : resp[0].images});
					
				 }
	  

Answer 1

我最终使用ng-if来解决这个问题：）