Ionic 1中$ionicPopup状态切换后异常的解决方法

It sounds like you're hitting a common timing issue where your popup is trying to render before the DOM is fully ready after a state transition. Let's walk through the fixes that should resolve this:

1. Wrap Popup Call in $timeout #

The most reliable fix is to delay the popup until Angular has finished its digest cycle and the view is fully rendered. Use $timeout (make sure to inject it into your controller):

// Inject $timeout into Controller-1
.controller('Controller-1', function($scope, $ionicPopup, $state, $timeout) {
  $timeout(function() {
    $ionicPopup.show({
        title: "Delivery Not Available",
        subTitle: 'Selected area is beyond our delivering area. You can place only Take Away orders.',
        buttons: [
            {
                text: 'Cancel',
                onTap: function(e) { return true; }
            },
            {
                text: '<b>OK</b>',
                type: 'button-balanced',
                onTap: function(e) { $state.go('home.app'); }
            },
        ]
    });
  }, 0);
});

Why this works: #

When you navigate via $state.go, your controller initializes right away, but the DOM for the new state might still be loading. A $timeout with 0 delay pushes the popup call to the end of the browser's event loop, ensuring Angular has finished rendering the view before the popup tries to attach itself.

2. Remove Unnecessary scope Reference #

Looking at your code, you’re passing scope: $scope to the popup but aren’t using any scope variables in its content or buttons. Removing this line eliminates potential conflicts with a partially initialized scope after state transition:

$ionicPopup.show({
    title: "Delivery Not Available",
    subTitle: 'Selected area is beyond our delivering area. You can place only Take Away orders.',
    // Remove scope: $scope here
    buttons: [/* ... */]
});

3. Check for Console Errors #

Open your browser’s developer tools (F12) and check the Console tab for errors when the popup fails to show. Common issues might include:

• Accidental missing dependencies (unlikely here since it works on first load)
• Conflicts with the $state service in the OK button’s onTap function
• DOM manipulation issues after state transition

4. Disable State Caching #

If your state for Controller-1 has cache: true enabled, the controller might not reinitialize properly on navigation. Disable caching to ensure a fresh controller instance each time:

$stateProvider.state('your.controller1.state', {
  url: '/controller1',
  templateUrl: 'controller1.html',
  controller: 'Controller-1',
  cache: false // Force controller reinitialization
});

These steps should get your popup working consistently, even after navigating from another controller.

内容的提问来源于stack exchange，提问作者Abhijith C S