咨询：是否存在适用于阶段式进度流程的AngularJS指令？

嘿，我之前做项目时刚好碰到过类似的需求，给你几个实用的思路和方案参考！

一、自定义指令是最优解 #

因为你要的是阶段+进度的组合展示，现成的进度条组件大多只做单一的进度百分比展示，满足不了阶段状态的细分需求，自己写个指令灵活性最高。这里给个核心实现思路：

• 指令接收两个关键参数：stages（所有阶段的数组，比如[{name: '初始化', completed: true}, {name: '数据处理', completed: false}]）和currentStage（当前处于哪个阶段）
• 模板里用ng-repeat遍历阶段，通过ng-class给已完成、当前进行中、未开始的阶段加上不同样式（比如已完成的打勾标记、变绿高亮，当前阶段用特殊边框区分）
• 可以额外搭配一个辅助进度条，根据已完成阶段的数量计算整体进度百分比（已完成数/总阶段数*100%），让用户更直观看到整体推进情况

给你贴个极简的指令代码片段，你可以基于这个扩展：

angular.module('myApp').directive('stageProgress', function() {
  return {
    restrict: 'E',
    scope: {
      stages: '=',
      currentStage: '='
    },
    template: `
      <div class="stage-progress-wrapper">
        <!-- 辅助进度条 -->
        <div class="overall-progress">
          <div class="progress-fill" style="width: {{getProgressPercent()}}%"></div>
        </div>
        <!-- 阶段列表 -->
        <div class="stage-list">
          <div class="stage-item" ng-repeat="stage in stages" ng-class="getStageClass(stage)">
            <div class="stage-icon">
              {{stage.completed ? '✓' : $index + 1}}
            </div>
            <span class="stage-label">{{stage.name}}</span>
          </div>
        </div>
      </div>
    `,
    link: function(scope) {
      // 计算整体进度百分比
      scope.getProgressPercent = function() {
        if (!scope.stages || scope.stages.length === 0) return 0;
        const completedCount = scope.stages.filter(stage => stage.completed).length;
        return (completedCount / scope.stages.length) * 100;
      };

      // 返回阶段对应的样式类
      scope.getStageClass = function(stage) {
        if (stage.completed) return 'stage-completed';
        if (stage.name === scope.currentStage) return 'stage-active';
        return 'stage-pending';
      };
    }
  };
});

对应的CSS可以根据你的UI设计调整，比如让阶段横向排列、设置不同状态的颜色和间距，很容易做出符合需求的样式。

二、基于现有组件改造 #

如果不想从零搭建，也可以在现有AngularJS组件基础上扩展：

• 比如用angular-ui-bootstrap的进度条组件，在进度条的上方或下方添加阶段标签，通过监听进度值来同步更新各个阶段的状态
• 也可以找专门的“步骤指示器”类指令（AngularJS虽然生态偏老，但还是有不少现成的），不过挑选时尽量选有过维护记录的，避免依赖兼容性问题

三、交互细节优化建议 #

• 如果业务允许，可以给阶段添加点击交互，比如点击已完成阶段查看对应步骤的历史记录，点击未开始阶段触发跳转逻辑
• 给阶段状态切换添加动画，比如完成时的打勾淡入动画、阶段切换时的平滑过渡效果，提升用户体验
• 做响应式适配，移动端可以把阶段改成纵向排列，避免横向挤在一起导致内容显示不全

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