Ionic structure - two pop-ups in tandem
I have an ionic application where a user clicks a button, then a popup appears and then the user clicks a button in the popup and another pops up. This works fine in the browser , but when I deploy it to an android device, after the second popup closes, the page freezes and I can no longer press the main button on the page.
Here's a short but complete app that demonstrates my problem.
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<!-- version 1.0.0-beta.9 -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script>
angular.module("app", ["ionic"])
.controller("controller", function ($scope, $ionicPopup, $timeout) {
var popup1;
$scope.popup1 = function () {
popup1 = $ionicPopup.show({
template: '<button ng-click="popup2()">popup2</button>',
title: 'popup1',
scope: $scope
});
}
$scope.popup2 = function () {
$ionicPopup.alert({
title: "Popup 2"
}).then(function () {
/*
$timeout(function () {
popup1.close();
});
*/
popup1.close();
});
}
});
</script>
</head>
<body ng-app="app" ng-controller="controller">
<button ng-click="popup1()">popup1</button>
</body>
</html>
source to share
The reason it doesn't work is likely that the second popup opens before the first one closes, which could destroy the knowledge that the first exists. If you kill the first popup before opening the second one, that should fix the problem.
I see several options:
1. Create your buttons in an ionic way and use the method onTap
$scope.popup1 = $ionicPopup.show({
template: 'Your template here',
title: 'popup1',
scope: $scope,
buttons: [
{
text: 'Popup2',
onTap: function (e) {
$scope.popup1.close();
return $scope.popup2();
}
}
]
});
2. Close the popup1
first thing inpopup2()
$scope.popup2 = function () {
$scope.popup1.close();
// Open popup 2
}
3. Open popup2
in timeout
If the above doesn't work, put a timeout around the code in popup2
to give Ionic time to close the first popup.
$scope.popup2 = function () {
// Move to the bottom of the queue to let Ionic close the first popup
$timeout( function () {
// Load popup2
});
};
source to share
My decision:
$rootScope.solidAlertPromise = $q.resolve(); // make the very first alert happen immediately
//lets create a reusable function to get rid of static and local problems
window.alert = function(message) {
//chaining does the trick
$rootScope.solidAlertPromise = $rootScope.solidAlertPromise.then(
function() {
//New Popup will rise as soon as the last Popup was closed (resolved).
//but it will rise immediately after closing the last Popup - definitely!
return $ionicPopup.alert({title: 'solidAlert', content: message});
}
);
};
//Now we can call our function sequentially
alert('After max has closed this alert-popup, the next one will rise immediately!');
alert('Next one -press OK to get the nex one-');
alert('and so on');
It's just for the purpose of epithelialization: we have to look at rejection cases, etc.!
$ ionicPopup.alert
can be replaced with
$ ionicPopup.show
I think.
source to share