angularjs – 递归ui路由器嵌套视图

发布时间：2020-12-17 17:24:31 所属栏目：安全来源：网络整理

导读：我正在尝试创建一个文件查看器,我想嵌套子目录.我正在使用ui-router,我希望每个子目录都有自己的URL和状态. 说我有以下结构： Root |__Folder |__Folder |__SubFolder |__SubSubFolder 我希望我的路线是： files/:folderID/:SubFolderID/:SubSubFolderID 我

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

说我有以下结构：

Root
  |__Folder
  |__Folder
     |__SubFolder
        |__SubSubFolder

我希望我的路线是：

files/:folderID/:SubFolderID/:SubSubFolderID

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

解决方法

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

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)

动态网址参数 – 将始终有效.我们只需要在控制器中解析它并决定后续步骤.这是一个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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!