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 plete 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>
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 plete 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>
-
I think display two popups is the same thing as making a single popup with two panels. No? Or you can
popup1.close();when you call$scope.popup2()– EpokK Commented Aug 15, 2014 at 7:22 - @EpokK Thanks for your response. My popup already has a plex template. I can't add more elements (panels) to it. I Also tried your solution. It didn't work either. – Ali Dorosty Commented Aug 15, 2014 at 19:59
- I was running Ionic version 1.1.0. Upgrading it to 1.2.4 fixed this issue for me. Changelog – krtkgpt Commented Jan 29, 2016 at 7:41
2 Answers
Reset to default 6The 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
});
};
My solution:
$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');
That's just for eplanation purpose: We should have a look at the rejection-cases etc.!
$ionicPopup.alert
can be replaced with
$ionicPopup.show
I think.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742287413a4415571.html
评论列表（0条）