ionic framework - ionicframework - Ionic Multiple Modals solo muestra por última vez

ionic panel

Question

He intentado agregar múltiples modales a mi proyecto.

El problema es que solo aparece la última vista modal, no importa a cuál llame.

Aquí está el código:

.controller(''AppCtrl'', function($scope, $ionicModal, $timeout) {
$scope.modal1Data = {};
$ionicModal.fromTemplateUrl(''templates/modal1.html'', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
$scope.closeModal1 = function() {
$scope.modal.hide();
};
$scope.model1 = function() {
$scope.modal.show();
};
$scope.doModal1 = function() {
console.log(''Doing Modal1'', $scope.modal1Data);
$timeout(function() {
$scope.closeUseful();
}, 1000);
};
$scope.modal2Data = {};
$ionicModal.fromTemplateUrl(''templates/modal2.html'', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
$scope.closeModal2 = function() {
$scope.modal.hide();
};
$scope.model2 = function() {
$scope.modal.show();
};
$scope.doModal2 = function() {
console.log(''Doing Modal2'', $scope.modal2Data);
$timeout(function() {
$scope.closeUseful();
}, 1000);
};
}) //end controller

¿Cómo puedo arreglar esto?

Answer 1

El punto equivocado es su variable $scope.modal . Porque está intentando acceder a 2 modal en 1 variable. Arregle así:

.controller(''AppCtrl'', function($scope, $ionicModal, $timeout) {
$scope.modal1Data = {};
$ionicModal.fromTemplateUrl(''templates/modal1.html'', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
$scope.closeModal1 = function() {
$scope.modal.hide();
};
$scope.model1 = function() {
$scope.modal.show();
};
$scope.doModal1 = function() {
console.log(''Doing Modal1'', $scope.modal1Data);
$timeout(function() {
$scope.closeUseful();
}, 1000);
};
$scope.modal2Data = {};
$ionicModal.fromTemplateUrl(''templates/modal2.html'', {
scope: $scope
}).then(function(modal) {
//Fix this line, changed the variable name to different name.
$scope.modal2 = modal;
});
$scope.closeModal2 = function() {
$scope.modal2.hide();
};
$scope.model2 = function() {
$scope.modal2.show();
};
$scope.doModal2 = function() {
console.log(''Doing Modal2'', $scope.modal2Data);
$timeout(function() {
$scope.closeUseful();
}, 1000);
};
}) //end controller

Answer 2

Crea un servicio como este:

.service(''modalService'', function($ionicModal) {
this.openModal = function(id) {
var _this = this;
if(id == 1) {
$ionicModal.fromTemplateUrl(''templates/search.html'', {
scope: null,
controller: ''SearchCtrl''
}).then(function(modal) {
_this.modal = modal;
_this.modal.show();
});
} else if(id == 2) {
$ionicModal.fromTemplateUrl(''templates/login.html'', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
} else if( id == 3) {
$ionicModal.fromTemplateUrl(''templates/signup.html'', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
}
};
this.closeModal = function() {
var _this = this;
if(!_this.modal) return;
_this.modal.hide();
_this.modal.remove();
};
})

y llame al modal con un ng-clic como este:

ng-click="modalService.openModal(1)"