AngularJS中$http响应后正确加载Bootstrap模态框数据问题

这个问题我之前帮人排查过好几次，本质就是异步请求和模态框渲染的时序没对齐——模态框抢在数据完全返回前就渲染了，你用的$scope.$apply()可能时机不对，甚至可能踩了Angular digest周期的坑。下面给你几个落地的解决思路：

1. 最直接：等数据加载完再开模态框 #

别提前初始化模态框，把打开模态框的逻辑死死攥在$http.get()的成功回调里，确保数据绑定完成后再渲染模态框：

$http.get('/api/your-data-endpoint')
  .then(function(response) {
    // 先把数据稳稳绑定到scope
    $scope.modalData = response.data;
    // 确认数据到位了，再触发模态框
    $('#yourModal').modal('show');
  })
  .catch(function(error) {
    console.error('数据加载崩了:', error);
  });

从根源上避免“模态框等数据”的尴尬，自然就不会出现时有时无的情况。

2. 更省心：改用AngularUI Bootstrap的模态框 #

原生Bootstrap模态框是jQuery写的，它的DOM操作完全脱离Angular的digest周期，就算你数据更新了，视图也可能没反应。AngularUI Bootstrap专门做了Angular适配的模态框，完全跟着Angular的生命周期走：

先在页面里定义模态框模板（也可以单独存成HTML文件）：

<script type="text/ng-template" id="myModalContent.html">
  <div class="modal-header">
    <h3 class="modal-title">数据详情</h3>
  </div>
  <div class="modal-body">
    <!-- 直接绑定数据就行，自动同步变化 -->
    <p>{{ modalData.detail }}</p>
    <ul>
      <li ng-repeat="item in modalData.list">{{ item.name }}</li>
    </ul>
  </div>
</script>

然后在控制器里用$uibModal服务调用：

angular.module('yourApp', ['ui.bootstrap'])
  .controller('YourController', function($scope, $http, $uibModal) {
    $scope.openModal = function() {
      $http.get('/api/your-data-endpoint')
        .then(function(response) {
          var modalInstance = $uibModal.open({
            templateUrl: 'myModalContent.html',
            controller: function($scope, $uibModalInstance, data) {
              $scope.modalData = data;
            },
            resolve: {
              // 把拿到的数据直接传给模态框控制器
              data: function() {
                return response.data;
              }
            }
          });
        });
    };
  });

这种方式根本不需要手动调用$scope.$apply()，整个流程都在Angular的digest周期里，数据变了视图自动更。

3. 硬刚原生Bootstrap：正确用$apply()和$timeout #

如果你非得用原生Bootstrap模态框，那得把$scope.$apply()的用法搞对——只有当你在Angular的digest周期之外修改了scope数据时才需要调用它，不然会抛出$apply already in progress的错误。

更稳妥的做法是用$timeout包裹模态框的显示逻辑，确保数据绑定完成后再渲染DOM：

$http.get('/api/your-data-endpoint')
  .then(function(response) {
    $scope.modalData = response.data;
    // 用$timeout延迟0毫秒，确保digest完成后再开模态框
    $timeout(function() {
      $('#yourModal').modal('show');
    }, 0);
  });

$timeout会自动触发digest，相当于给Angular留足时间更新视图，再让模态框上场。

快速排查小技巧 #

• 打开浏览器控制台看看有没有$apply already in progress的错误，要是有，直接把你加的$scope.$apply()删掉就行。
• 在$http回调里加个console.log($scope.modalData)，确认数据确实已经赋值了，排除数据本身没拿到的情况。

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