I’ve been searching for like two or three days and I cannot find a solution to my problem…
This is my slidebox that is loaded in a html iframe
<ion-content class="has-header has-footer" has-bouncing="false" ng-controller="CamaraCtrl">
<div id="contenedorImagenNuevoLocal">
<ion-slide-box id="slideBoxLocal">
<ion-slide id="slideLocal" ng-repeat="s in fotosSlide">
<img class="imagenesLocal" ng-src="{{s.url}}">
</ion-slide>
</ion-slide-box>
<img id="editarImagen" onclick="parent.openModalAnadirFotosLocal();" src="img/icon_picture@2x.png">
</div>
(That is only a part of the code, in the original code all is closed correctly)
Then I’ve this controller in app.js the default angular script that generates Ionic
.controller('CamaraCtrl', function ($scope, $cordovaCamera, $ionicLoading, $ionicSlideBoxDelegate) {
$scope.picData = [];
var maxImagenes = 0;
var seleccionadas = 0;
var fotosSel = [];
$scope.fotosSlide = [
{
url: "img/foto_placeholder.png"
}
];
$scope.guardarFotos = function () {
maxImagenes = 0;
seleccionadas = 0;
closeModalAnadirFotosLocal();
var imgEl = $(".imagenesAFL");
for (var i = 0; i < imgEl.length; i++) {
$(imgEl).attr("src", "");
}
$scope.fotosSlide.pop();
var lpd = $scope.picData.length;
for (var i = 0; i < lpd; i++) {
$scope.fotosSlide.push({
url: $scope.picData.pop()
});
$scope.$apply();
}
var lfs = fotosSel.length;
for (var i = 0; i < lfs; i++) {
fotosSel.pop();
}
$ionicSlideBoxDelegate.update();
$("#btnGuardarFotoLocal").css("display", "none");
$("#btnBorrarFotoLocal").css("display", "none");
}
Finally I’ve this modal in a html that is the parent of the iframe and I show the modal with display block/none
<div id="modalAnadirFotosLocal" ng-controller="CamaraCtrl" style="display:none">
<img on-hold="seleccionarImagen($event)" id="img_local_1" class="imagenesAFL" ng-click="quitarSeleccion($event)" src="">
<img on-hold="seleccionarImagen($event)" id="img_local_2" class="imagenesAFL" ng-click="quitarSeleccion($event)" src="">
<img on-hold="seleccionarImagen($event)" id="img_local_3" class="imagenesAFL" ng-click="quitarSeleccion($event)" src="">
<img on-hold="seleccionarImagen($event)" id="img_local_4" class="imagenesAFL" ng-click="quitarSeleccion($event)" src="">
<a id="btnGuardarFotoLocal" class="button button-block button-stable btnAFL" ng-click="guardarFotos()">Guardar</a><a id="btnBorrarFotoLocal" class="button button-block button-stable btnAFL" ng-click="borrarFotos()" style="font-weight:bold;">Borrar imágenes</a>
<a id="btnHacerFotoLocal" class="button button-block button-stable btnAFL" ng-click="hacerFotoLocal()">Hacer foto</a>
<a id="btnGaleriaLocal" class="button button-block button-stable btnAFL" ng-click="abrirGaleria()">Galería</a>
<a style="font-weight:bold;" class="button button-block button-stable btnAFL" ng-click="cancelarModal()">
Cancelar
</a>
</div>
In my controller I pick some pictures from Android gallery or a took a photo from the camera and I store that photos in an array, then when I click the button “Guardar” I want my slide-box to generate slides with those pictures.
The problem is that I cannot manage to update the slide-box.
Thank you!