Angular $uibModal是否有类似onload的事件？加载前显示加载器方案

首先明确回答：$uibModal 并没有专门的类似 onload 的原生事件，但我们可以通过手动控制加载流程、利用 Angular 内置事件或模态框的生命周期机制，完美实现「等待模态框模板/数据加载时显示加载器」的需求。

下面分场景给出具体实现方式：

一、针对远程模板加载耗时的情况 #

如果你的模态框模板是从服务器远程获取的，最直接的方式是手动预加载模板，在加载前后控制加载器的显示/隐藏：

1. 页面中添加加载器 #

<!-- 加载器样式可按需定制，这里用基础示例 -->
<div ng-show="isModalLoading" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">
  正在加载模态框，请稍候...
</div>

2. 控制器中实现模板预加载与模态框打开逻辑 #

angular.module('yourApp').controller('ParentController', function($scope, $uibModal, $http, $templateCache) {
  $scope.isModalLoading = false;

  $scope.openModal = function() {
    // 触发模态框时立即显示加载器
    $scope.isModalLoading = true;

    // 手动请求远程模板
    $http.get('/path/to/your/modal-template.html')
      .then(function(response) {
        // 将模板存入缓存，避免重复请求
        $templateCache.put('cached-modal-template.html', response.data);

        // 模板加载完成后，打开模态框
        const modalInstance = $uibModal.open({
          templateUrl: 'cached-modal-template.html',
          controller: 'ModalInnerController'
        });

        // 模态框关闭/取消时，确保加载器隐藏
        modalInstance.result.finally(function() {
          $scope.isModalLoading = false;
        });
      })
      .catch(function(error) {
        // 模板加载失败，隐藏加载器并处理错误
        $scope.isModalLoading = false;
        alert('模态框加载失败，请稍后重试');
        console.error('模板加载错误:', error);
      });
  };
});

二、针对模态框内数据加载耗时的情况 #

如果模板本身加载很快，但模态框需要从服务器请求数据才能渲染内容，可以利用模态框的 resolve 属性和 Angular 的 $viewContentLoaded 事件：

1. 用 resolve 预加载数据 #

resolve 中的 Promise 会在模态框打开前执行完成，刚好覆盖数据加载的等待时间：

$scope.openModal = function() {
  $scope.isModalLoading = true;

  const modalInstance = $uibModal.open({
    templateUrl: 'local-modal-template.html',
    controller: 'ModalInnerController',
    resolve: {
      // 预加载模态框需要的数据
      modalData: function($http) {
        return $http.get('/api/modal-data').then(res => res.data);
      }
    }
  });

  // 无论模态框是关闭还是取消，最终都隐藏加载器
  modalInstance.result.finally(() => {
    $scope.isModalLoading = false;
  });
};

2. 在模态框控制器中监听视图加载完成 #

如果需要在模态框内容完全渲染后做处理，可以监听 Angular 内置的 $viewContentLoaded 事件：

angular.module('yourApp').controller('ModalInnerController', function($scope, modalData) {
  // 预加载的数据已可直接使用
  $scope.data = modalData;

  // 当模态框的视图内容完全加载完成时触发
  $scope.$on('$viewContentLoaded', function() {
    console.log('模态框内容已渲染完成');
    // 若需通知父控制器隐藏加载器，可使用 $emit
    // $scope.$emit('modalLoaded');
  });
});

三、注意事项 #

• 如果你的模态框模板是内嵌在页面中的（比如用 <script type="text/ng-template">），模板加载几乎是瞬时的，此时加载器主要用来覆盖数据请求的等待时间，使用上述 resolve 方案即可。
• 加载器的样式可根据项目需求定制，比如添加动画、全屏遮罩层，进一步提升用户体验。

内容的提问来源于stack exchange，提问作者mohaidar