我之前在做Ionic1项目时也踩过这个坑！你遇到的问题本质是没有正确管理弹窗实例和定时任务的生命周期，导致第一次关闭弹窗后，残留的引用或未清理的定时器干扰了后续弹窗的样式渲染。

先分析下你现有代码的问题：你直接调用$ionicPopup.alert()但没保存返回的弹窗实例，而且用$rootScope来存定时器引用的方式不够严谨，容易出现定时器重复创建、弹窗实例未正确销毁的情况，最终导致样式异常。

下面是具体的解决方案：

1. 保存弹窗实例，精准控制关闭逻辑 #

每次创建弹窗时，一定要保存它的实例对象，用这个实例来调用close()方法，而不是依赖全局的closePopup方法（这个方法大概率没有绑定正确的弹窗上下文）。

示例代码：

// 在控制器内定义变量，专门保存当前弹窗实例
let activePopup;

// 封装显示成功弹窗的函数
function showSuccessAlert() {
  // 第一步：先清理之前的定时器和弹窗（如果存在的话）
  if ($rootScope.promise_closePopup) {
    $interval.cancel($rootScope.promise_closePopup);
    $rootScope.promise_closePopup = null;
  }
  if (activePopup) {
    activePopup.close();
    activePopup = null;
  }

  // 第二步：创建新的弹窗并保存实例
  activePopup = $ionicPopup.alert({
    title: 'Operation Successful',
    template: 'operation has been completed'
  });

  // 第三步：设置定时关闭任务
  $rootScope.promise_closePopup = $interval(() => {
    if (activePopup) {
      activePopup.close();
      activePopup = null; // 关闭后立即清空实例引用
    }
  }, 3000); // 这里替换成你需要的定时时长
}

2. 清理资源避免内存泄漏 #

当页面销毁（比如用户跳转到其他页面）时，一定要手动取消定时器并关闭弹窗，否则残留的资源不仅会导致样式问题，还会造成内存泄漏。在控制器的$destroy钩子中添加清理逻辑：

$scope.$on('$destroy', () => {
  // 取消定时器
  if ($rootScope.promise_closePopup) {
    $interval.cancel($rootScope.promise_closePopup);
    $rootScope.promise_closePopup = null;
  }
  // 关闭当前弹窗
  if (activePopup) {
    activePopup.close();
    activePopup = null;
  }
});

3. 进阶优化：用服务封装弹窗逻辑（推荐） #

尽量避免在控制器里直接处理弹窗和定时器的生命周期，把这些逻辑封装到专用服务中，既模块化又能避免全局变量污染：

angular.module('yourApp').service('PopupManager', ['$ionicPopup', '$interval', function($ionicPopup, $interval) {
  let currentPopup;
  let closeTimer;

  // 显示成功弹窗的方法
  this.showSuccessAlert = function(closeDelay = 3000) {
    // 先清理旧资源
    this._cleanup();

    // 创建新弹窗
    currentPopup = $ionicPopup.alert({
      title: 'Operation Successful',
      template: 'operation has been completed'
    });

    // 设置定时关闭
    closeTimer = $interval(() => {
      this._cleanup();
    }, closeDelay);
  };

  // 内部清理方法
  this._cleanup = function() {
    if (closeTimer) {
      $interval.cancel(closeTimer);
      closeTimer = null;
    }
    if (currentPopup) {
      currentPopup.close();
      currentPopup = null;
    }
  };
}]);

然后在控制器中注入并使用：

angular.module('yourApp').controller('YourController', ['PopupManager', '$scope', function(PopupManager, $scope) {
  // 调用显示弹窗
  PopupManager.showSuccessAlert(3000);

  // 页面销毁时清理
  $scope.$on('$destroy', () => {
    PopupManager._cleanup();
  });
}]);

这样处理后，每次显示弹窗都是全新的实例，定时器和弹窗引用也能被正确清理，样式丢失的问题就解决了。

内容的提问来源于stack exchange，提问作者Syed Uzair Uddin