Ons-carousel inside ons-dialog doesnt load first image
-
I have a simple ons-carousel that opens when i load the ons-dialog. All work perfectly but when i load the firs image of my ons-caorusel it seems that something goes wrong and the image is not loaded. I tried to use the function setActiveCarouselItemIndex(index) but nothing changes.
Here my code and my demo.
My list:my first touch on the selected item:
my second touch after the second selected item:
If i click in the second image at the button close (the white one) when the image is not loaded, for a while it seems to see the image loaded. so only when i click at the button dialog.hide();
I tried to load it when tha dialog is opened, but continue to give me the same result
What i can do? how to use the variable $watch in this case?
Thanks in adviceThis is my code:
<ons-template id="dialog.html"> <ons-dialog style="width: 100%; height: 80%;" id="dialog-3" ng-controller="postEventoController" > <div style="text-align: center; padding: 10px;"> <ons-carousel swipeable overscrollable auto-scroll auto-refresh fullscreen var="carousel" > <ons-carousel-item ng-repeat="attachments in item.attachments" > <img class="immagine-eventi-sx" ng-src="{{ attachments.url}}"> </ons-carousel-item> </ons-carousel> <p> <ons-button modifier="clean" ng-click="hideDialog('dialog-3')">Close</ons-button> </p> </div> </ons-dialog> </ons-template>