admin管理员组

文章数量:1332865

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>
  • javascript
  • angularjs
  • ionic-framework
Share Improve this question edited Aug 15, 2014 at 18:21 Ali Dorosty asked Aug 14, 2014 at 14:10 Ali DorostyAli Dorosty 1492 silver badges10 bronze badges 3
  • 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
Add a ment  | 

2 Answers 2

Reset to default 6

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
  });
};

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.

本文标签： javascriptionic framework two popups in tandemStack Overflow

版权声明：本文标题：javascript - ionic framework two popups in tandem - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742287413a2447178.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。