Question

我正在构建类似于Google云端硬盘或Dropbox的用户界面。作为用户，我应该能够单击一个文件夹并查看嵌套在其中的所有文件和文件夹。当我这样做时，当前文件夹应该反映在url中（例如home /：folderId）。我应该可以重复此过程 ad infinitum （例如home /：folderId /：folderId：/ folderId）。每个：folderId应该是其父文件夹的子状态。

使用ui-router，我目前能够获得workspace / my-workspace /：folderId，其中my-workspace显示所有根级文件夹和文件。当我点击文件夹时，我可以看到所有嵌套文件和文件夹。但是，当我单击嵌套文件夹时，会为子文件夹创建一个新状态，但它会替换父文件夹的状态。此外，：folderId不会附加到网址，而是替换它（例如，home / 123变为home / 456而不是home / 123/456）。

如何做到这一点？下面是我的配置块的精简版本。

.config(function config($urlRouterProvider, $stateProvider) {
  $urlRouterProvider.when('/workspace', '/workspace/my-workspace');

  var workspace = {
    name: 'workspace',
    url: '/workspace',
    views: {
      '': {
        templateUrl: 'workspace.partial.html',
        controller: 'WorkspaceController',
        controllerAs: 'workspace'
      },
      'header@workspace': {
        templateUrl: 'header.partial.html'
      },
      'leftPanel@workspace': {
        templateUrl: 'left-panel.partial.html'
      },
      'mainPanel@workspace': {
        templateUrl: 'main-panel.partial.html'
      }
    },
    resolve: {
      workspace: function workspace(WorkspaceService) {
        var workspace;

        return WorkspaceService.getWorkspace()
          .then(function(response) {
            workspace = response.data;
            return workspace;
          });
      }
    }
  };

  var myWorkspace = {
    name: 'myWorkspace',
    url: '/my-workspace',
    parent: 'workspace',
    views: {
      'main@workspace': {
        templateUrl: 'my-workspace.partial.html',
        controller: 'MyWorkspaceController',
        controllerAs: 'myWorkspace'
      }
    },
    resolve: {
      myWorkspace: function(workspace, WorkspaceService) {
        var myWorkspace;

        return WorkspaceService.getMyWorkspace()
          .then(function(response) {
            myWorkspace = response.data;
            myWorkspace.folders.forEach(function(folder) {
              folder.sourceType = 'folder';
            });

            return myWorkspace;
          });
      }
    }
  };

  var folder = {
    name: 'folder',
    url: '/:folderId',
    parent: 'myWorkspace',
    views: {
      'main@workspace': {
        // reuses myWorkspace template
        templateUrl: 'my-workspace.partial.html',
        controller: 'MyWorkspaceFolderController'
      }
    },
    resolve: {
      folder: function(WorkspaceService, $stateParams) {
        var folderId = $stateParams.folderId,
            folder;

        return WorkspaceService.getFolder(folderId)
          .then(function(response) {
            folder = response.data;
            folder.folders.forEach(function(folder) {
              folder.sourceType = 'folder';
            });
            return folder;
          });
      }
    }
  };

  $stateProvider
    .state(workspace)
    .state(myWorkspace)
    .state(folder);
});

Answer 1

在你得到更好的答案之前，有不同的解决方案。其相关内容Q & A和here

我们应该采取州文件夹：

var folder = {
    name: 'folder',
    url: '/:folderId',

并期望：

<强> home/:folderId/:folderId:/folderId

并将要求更改为具有以下状态：

<a href="#/home/Folder1">
<a href="#/home/Folder1/SubFolder1/">
<a href="#/home/Folder1/SubFolder1/SubFolderA">
<a href="#/home/Folder1/SubFolder1/SubFolderB">
<a href="#/home/Folder1/SubFolder2/SubFolderX">

由一个参数 folderPath

表示

var folder = {
    name: 'folder',
    url: '/{folderPath:[a-zA-Z0-9/]*}',

检查Q & A

$ stateParams应该显示x-depth的文件夹树

1 个答案: