递归 ui 路由器嵌套视图 [英] Recursive ui router nested views

问题描述

我正在尝试创建一个文件查看器并且我想嵌套子目录.我正在使用 ui-router，我希望每个子目录都有自己的 URL 和状态.

I am trying to create a file viewer and I want to nest the subdirectories. I am using ui-router and I want each subdirectory to have its own URL and state.

假设我有以下结构:

Root
  |__Folder
  |__Folder
     |__SubFolder
        |__SubSubFolder

我希望我的路线是:

files/:folderID/:SubFolderID/:SubSubFolderID

我想递归地这样做，而不是为每个子目录创建一个新状态

And I would like to do that recursively as opposed to creating a new state for each subdirectory

推荐答案

我建议，使用 one state 和 one param - folderPath代码>.因为 ui-router 应该尽快定义所有状态，以支持 url 路由.所有这些唯一的 folderPath 可能不同，也可能是动态的 - 在运行时，在应用程序生命周期中.

I would suggest, do it with one state and one param - folderPath. Because ui-router should have all the states defined soon enough, to support url routing. All these unique folderPath could differ, could be dynamic - in the runtime, in app life time.

动态状态定义始终是一个问题(如果在 app.run() 中定义了状态，则可能会发生用户访问尚未定义的 url - 否则 被使用... 糟糕)

Dynamic state definition is always an issue (if states are defined in app.run() it could happen that user comes to url which is not defined yet - otherwise is used... bad)

动态 url 参数 - 始终有效.我们只需要在控制器中解析它并决定下一步.这是一个工作示例.

状态及其参数可能是这样的

The state and its param could be like this

.state('files', {
      url: '/files/{folderPath:[a-zA-Z0-9/]*}',
      templateUrl: 'tpl.files.html',
      controller: 'FileCtrl'
    });

稍后我们可以像这样动态生成导航(链接):

Later we can dynamically generate navigation (links) like this:

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

在这个示例

这篇关于递归 ui 路由器嵌套视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！