I have an ionic app where the user taps a button, then a popup shows up and then the user taps a button in the popup and another one shows 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 tap the main button on the page.
Here's a short but complete app demonstrating 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>
The reason this isn't working is likely that the second popup is opening before the first one closes, which could be killing Ionic's knowledge that the first one exists. If you kill the first popup before the open the second one, that should solve the issue.
I see a few options:
1. Create your buttons in an Ionic way and use the onTap method
$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 popup1 first thing in popup2()
$scope.popup2 = function () {
$scope.popup1.close();
// Open popup 2
}
3. Open popup2 in a timeout
If the above don't work, put a timeout around the code in popup2 to give Ionic the 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
});
};