To start I created a codepen and I think the title says it all. I created a service to handle my modals, as seen here
.service('ModalService', function($ionicModal, $ionicLoading, $rootScope) {
var init = function(tpl, $scope) {
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
});
var promise;
$scope = $scope || $rootScope.$new();
promise = $ionicModal.fromTemplateUrl(tpl, {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
return modal;
});
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
return promise;
}
return {
init: init
}
})
and it gets called in the controller like so
ModalService.init('modal.html', $scope).then(function(modal) {
...do something....
$ionicLoading.hide();
modal.show();
});
The issue it that I can only close one modal, the first one or the second, but if I go into the second I cannot close the second. Im assuming when I close one its destroying the modal instance for both? How can I work around this if I do not want to slit it into different controllers?
