0
Когда я использую динамические данные для загрузки содержимого пятна, все изображения появляются под другим. Я не знаю, почему это происходит. Как мне его решить? Похоже, что 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'
// }];
\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