In my controller, modal views are initialized with a factory by listening to the $ionicView.afterEnter event. As the documentation suggests, modal views should be removed whenever the current active ionic view is about to be destroyed. A function is called in the $ionicView.beforeLeave callback in order to remove the modal views.
.controller('UserProfileCtrl', function($scope, $state, user, ModalFactory) {
$scope.user = user;
$scope.checkOrders = function() {
$state.go('app.orders');
};
$scope.$on('$ionicView.afterEnter', function() {
$scope.modals = ModalFactory.getUserProfileModals($scope, user.photos);
});
$scope.$on('$ionicView.beforeLeave', function() {
$scope.modals.remove();
});
});
.factory('ModalFactory', function($ionicModal, $ionicSlideBoxDelegate) {
var modalFactory = {};
modalFactory.getUserProfileModals = function(scope, images) {
var modals = {
'views': [],
'data': []
};
$ionicModal.fromTemplateUrl('templates/modals/common/image-view.html', { 'scope': scope }).then(function(modal) { modals.views.imageView = modal; });
if (images) {
modals.data.images = images;
}
modals.open = function(view, slide) {
Object.keys(this.views).forEach(function(key, index) {
console.log(key);
});
if (view && this.views.hasOwnProperty(view)) {
this.views[view].show();
if (view == 'imageView' && slide) {
$ionicSlideBoxDelegate.$getByHandle('image-view').slide(slide);
}
}
};
modals.close = function(view) {
Object.keys(this.views).forEach(function(key, index) {
console.log(key);
});
if (view && this.views.hasOwnProperty(view)) {
this.views[view].hide();
} else {
Object.keys(this.views).forEach(function(key, index) {
this.views[key].hide();
});
}
};
modals.remove = function() {
console.log('remove');
Object.keys(this.views).forEach(function(key, index) {
console.log(key);
});
this.data.splice(0, this.data.length);
Object.keys(this.views).forEach(function(key, index) {
this.views[key].remove();
});
this.views.splice(0, this.views.length);
};
return modals;
};
return modalFactory;
});
However, I get the following output in the console when I execute these actions in sequence:
- call
$scope.modals.open('imageView', 1), - call
$scope.modals.close(), - navigate to another page with
$state.go('app.orders').
I tried listening to $destroy instead of $ionicView.beforeLeave, but then $scope.modals.remove() is not called at all. It seems $destroy is not fired when I am testing my application with Chrome.
Can anyone tell me when should I remove the modal views, and why is there such an error message in my scenario?
Update
After I modified the code in ModalFactory as follows, the error is gone.
function open(view, slide) {
if (view && modals.views.hasOwnProperty(view)) {
modals.views[view].show();
if (view == 'imageView' && slide) {
$ionicSlideBoxDelegate.$getByHandle('image-view').slide(slide);
}
}
};
function close(view) {
if (view && modals.views.hasOwnProperty(view)) {
modals.views[view].hide();
} else {
Object.keys(modals.views).forEach(function(key, index) {
modals.views[key].hide();
});
}
};
function remove() {
console.log('remove');
modals.data.splice(0, modals.data.length);
Object.keys(modals.views).forEach(function(key, index) {
modals.views[key].remove();
});
modals.views.splice(0, modals.views.length);
};
modals.open = open;
modals.close = close;
modals.remove = remove;
return modals;
