递归ui路由器嵌套视图

时间:2014-09-08 19:58:17

标签: angularjs angular-ui-router

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

说我有以下结构:

Root
  |__Folder
  |__Folder
     |__SubFolder
        |__SubSubFolder

我希望我的路线是:

files/:folderID/:SubFolderID/:SubSubFolderID

我希望以递归方式执行此操作,而不是为每个子目录

创建新状态

1 个答案:

答案 0 :(得分:5)

我建议,用一个州一个参数 - folderPath来做。因为ui-router应该尽快定义所有状态,以支持网址路由。所有这些独特的folderPath可能不同,可能是动态的 - 在运行时,在应用程序生命周期中。

  

动态状态定义始终是一个问题(如果状态是在app.run()中定义的,那么用户可能会遇到尚未定义的url - otherwise被使用... bad)

动态url参数 - 始终有效。我们只需要在控制器中解析它并决定后续步骤。这是working example

州和它的参数可能是这样的

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

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

<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">

在此example

中查看