AngularJS递归浏览文件夹时路径构建问题：如何正确回退路径

AngularJS本身并没有提供专门用于这种文件夹路径递归浏览与回退的内置工具，所以你需要手动处理，但有几种非常简洁且可靠的实现方式，比直接拼接字符串要省心得多。

推荐方案：用数组管理路径片段 #

直接字符串拼接的问题在于回退时需要复杂的截取操作，还容易出边界错误。换用数组来存储每个文件夹的名称片段，操作起来会直观很多：

// 初始化路径片段数组
let pathSegments = [];

// 进入文件夹时，添加片段
pathSegments.push(nameOfFolder);
// 生成完整路径字符串
const currentPath = pathSegments.join('/'); // 得到 folder1/folder2 这样的格式

// 回退到上一级文件夹时
if (pathSegments.length > 0) {
  pathSegments.pop(); // 移除最后一个片段
  currentPath = pathSegments.join('/'); // 更新路径
}

这种方式的优势很明显：

• 回退操作就是简单的pop()，完全不用处理字符串截取的边界情况
• 生成路径时用join('/')，自动处理分隔符，不会出现多余的斜杠
• 可以轻松获取当前路径的层级（pathSegments.length），方便做UI控制（比如回退按钮的禁用）

如果坚持用字符串处理 #

要是你不想改数组的方式，也可以手动截取字符串来实现回退：

// 回退逻辑
if (path.lastIndexOf('/') !== -1) {
  // 截取最后一个斜杠之前的部分
  path = path.substring(0, path.lastIndexOf('/'));
} else {
  // 已经到根目录，根据需求清空或保留（比如设为空字符串）
  path = '';
}

不过这种方法要额外处理几种边界情况：比如路径为空、只有单个文件夹名称（没有斜杠）的场景，不如数组方案健壮。

进阶：封装成AngularJS服务复用 #

如果你的应用多处需要用到文件夹路径管理，把逻辑封装成AngularJS的服务会更符合框架的模块化思想，方便全局复用：

angular.module('yourAppName').service('FolderPathService', function() {
  const pathSegments = [];

  // 进入文件夹
  this.enter = function(folderName) {
    pathSegments.push(folderName);
  };

  // 回退上一级
  this.goBack = function() {
    if (pathSegments.length > 0) {
      pathSegments.pop();
    }
  };

  // 获取当前完整路径
  this.getCurrentPath = function() {
    return pathSegments.join('/');
  };

  // 重置路径到根目录
  this.reset = function() {
    pathSegments.length = 0;
  };
});

然后在控制器里注入这个服务，直接调用方法就行：

angular.module('yourAppName').controller('FolderBrowserCtrl', function(FolderPathService) {
  // 进入文件夹
  FolderPathService.enter('folder1');
  // 获取路径："folder1"
  
  // 回退
  FolderPathService.goBack();
  // 获取路径：""
});

总的来说，用数组管理路径片段是最推荐的方式，逻辑清晰、不易出错，配合AngularJS的服务封装更能提升代码的可维护性。

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