离子框架两个弹出窗口串联答案

【问题标题】：ionic framework two popups in tandem离子框架两个弹出窗口串联
【发布时间】：2016-08-05 19:21:11
【问题描述】：

我有一个离子应用程序，用户点击一个按钮，然后弹出一个弹出窗口，然后用户点击弹出窗口中的一个按钮，另一个按钮出现。 这在浏览器中可以正常工作，但是当我将其部署到 Android 设备时，在第二个弹出窗口关闭后页面冻结，我无法再点击页面上的主按钮。

这是一个简短但完整的应用程序，展示了我的问题。

<!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>

【问题讨论】：

我认为显示两个弹出窗口与使用两个面板制作一个弹出窗口是一回事。不？或者你可以在拨打$scope.popup2()时popup1.close();
@EpokK 感谢您的回复。我的弹出窗口已经有一个复杂的模板。我无法向其中添加更多元素（面板）。我也试过你的解决方案。它也没有工作。
我运行的是 Ionic 1.1.0 版。将它升级到 1.2.4 为我解决了这个问题。 Changelog

标签： javascript angularjs ionic-framework

【解决方案1】：

这不起作用的原因可能是第二个弹出窗口在第一个弹出窗口关闭之前打开，这可能会导致 Ionic 不知道第一个弹出窗口存在。如果您在打开第二个弹出窗口之前杀死第一个弹出窗口，那应该可以解决问题。

我看到了几个选项：

1.以 Ionic 方式创建按钮并使用 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。关闭popup1第一件事popup2()

$scope.popup2 = function () {
  $scope.popup1.close();

  // Open popup 2
}

3.超时打开popup2

如果上述方法不起作用，请在 popup2 中的代码周围设置一个超时，让 Ionic 有时间关闭第一个弹出窗口。

$scope.popup2 = function () {
  // Move to the bottom of the queue to let Ionic close the first popup
  $timeout( function () {
    // Load popup2
  });
};

【讨论】：

【解决方案2】：

我的解决方案：

$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');

这只是为了说明：我们应该看看拒绝案例等！

$ionicPopup.alert

可以替换为

$ionicPopup.show

我认为。

【讨论】：