如何使用AngularJS的$uibModal实现链式对话框？

嘿，作为AngularJS新手碰到这种动态链式模态框的需求确实有点棘手——毕竟循环同步执行的逻辑和模态框异步交互的特性天生不搭。我来给你一套可行的方案，完美支持上一步、下一步、确定和取消功能，还能根据txt文件的数据动态生成模态链！

核心思路 #

放弃循环，改用状态跟踪+异步触发的方式：

• 先加载并解析txt文件的内容，转成结构化的对话框配置数组
• 维护一个当前步骤索引，记录用户的输入数据，以及模态实例的引用
• 利用$uibModal返回的Promise，在当前模态框关闭后，根据用户操作（上一步/下一步）触发对应的下一个模态框

具体实现步骤 #

1. 加载并解析TXT文件数据 #

假设你的txt文件是JSON格式的结构化数据（比如直接是JSON数组，或者每行一个对话框配置），先用$http加载并解析：

angular.module('app', ['ui.bootstrap'])
  .controller('ModalChainCtrl', function($scope, $http, $uibModal) {
    // 模态链状态管理：统一存步骤、当前索引、用户输入、模态实例
    $scope.modalState = {
      steps: [],
      currentIndex: 0,
      userInputs: [],
      currentModalInstance: null
    };

    // 加载txt文件里的对话框数据
    $http.get('dialogs.txt')
      .then(function(response) {
        // 假设txt内容是JSON数组，格式示例：[{"title":"步骤1","content":"请输入信息"},...]
        $scope.modalState.steps = JSON.parse(response.data);
        // 启动第一个模态框
        $scope.openModal(0);
      })
      .catch(function(err) {
        console.error('加载对话框数据失败:', err);
      });

2. 编写模态框打开与交互逻辑 #

这个方法负责根据步骤索引渲染模态框，并处理按钮的异步交互：

// 打开指定步骤的模态框
    $scope.openModal = function(index) {
      $scope.modalState.currentIndex = index;
      const currentStep = $scope.modalState.steps[index];
      // 恢复当前步骤的历史输入（如果有）
      $scope.currentInput = $scope.modalState.userInputs[index] || '';

      // 打开模态框
      $scope.modalState.currentModalInstance = $uibModal.open({
        templateUrl: 'modal-template.html',
        scope: $scope,
        resolve: {
          currentStep: () => currentStep
        }
      });

      // 模态框关闭后的回调：根据用户操作触发对应逻辑
      $scope.modalState.currentModalInstance.result
        .then(function(action) {
          switch(action) {
            case 'next':
              // 保存当前步骤输入
              $scope.modalState.userInputs[index] = $scope.currentInput;
              // 打开下一步（如果不是最后一步）
              if (index < $scope.modalState.steps.length - 1) {
                $scope.openModal(index + 1);
              }
              break;
            case 'prev':
              // 打开上一步（如果不是第一步）
              if (index > 0) {
                $scope.openModal(index - 1);
              }
              break;
            case 'confirm':
              // 保存最后一步输入，执行最终提交
              $scope.modalState.userInputs[index] = $scope.currentInput;
              $scope.handleFinalSubmit();
              break;
          }
        })
        .catch(function() {
          // 用户点击取消，重置所有状态
          $scope.modalState.userInputs = [];
          $scope.modalState.currentIndex = 0;
        });
    };

    // 最终提交逻辑：这里可以处理所有步骤的输入数据
    $scope.handleFinalSubmit = function() {
      console.log('所有步骤的用户输入:', $scope.modalState.userInputs);
      // 比如发送数据到后端、展示结果等
    };
  });

3. 模态框模板（modal-template.html） #

模板根据当前步骤动态显示按钮，绑定对应的操作：

<div class="modal-header">
  <h3 class="modal-title">{{currentStep.title}}</h3>
</div>
<div class="modal-body">
  <p>{{currentStep.content}}</p>
  <!-- 可自定义用户输入控件，比如文本框、下拉框等 -->
  <input type="text" ng-model="currentInput" class="form-control" placeholder="请输入内容">
</div>
<div class="modal-footer">
  <!-- 上一步按钮：仅非第一步显示 -->
  <button class="btn btn-default" 
          ng-click="modalState.currentModalInstance.close('prev')" 
          ng-show="modalState.currentIndex > 0">
    上一步
  </button>
  
  <!-- 下一步/确定按钮：最后一步显示确定，否则显示下一步 -->
  <button class="btn btn-primary" 
          ng-click="modalState.currentModalInstance.close(modalState.currentIndex === modalState.steps.length - 1 ? 'confirm' : 'next')">
    {{modalState.currentIndex === modalState.steps.length - 1 ? '确定' : '下一步'}}
  </button>
  
  <!-- 取消按钮：关闭所有模态并重置状态 -->
  <button class="btn btn-default" ng-click="modalState.currentModalInstance.dismiss('cancel')">取消</button>
</div>

关键说明 #

• 为什么不用循环？因为$uibModal.open()是异步操作，循环会一次性打开所有模态框，完全无法等待用户完成当前步骤的操作。而我们的方案是在当前模态框关闭的Promise回调里触发下一个，完美适配异步交互逻辑。
• 状态复用：通过modalState.userInputs存储每一步的输入，上一步时能自动恢复之前的内容，提升用户体验。
• 灵活性：txt文件的结构可以自定义，只要最终解析成steps数组即可，完全支持动态数量的对话框。

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