我正在尝试创建动态树样式导航。
基本布局如下：
- page 1
-- page 1-1
-- page 1-2
-- page 1-3
- page 2
-- page 2-1
-- page 2-2
-- page 2-3
- page 3
-- page 3-1
-- page 3-2
-- page 3-3
默认情况下，您只能看到主要链接：
- page 1
- page 2
- page 3
然后，您点击一个链接，获取该页面的内容，并显示其子链接：
- page 1
-- page 1-1
-- page 1-2
-- page 1-3
- page 2
- page 3
当我第一次开始研究这个时，我正在为每个主页面创建静态状态，并为通过视图加载的子页面创建动态路径：
.state('page1',{
url: '/page1',
views: {
'page1Menu': {
templateUrl: 'views/page1.menu.htm',
controller: 'page1MenuCtrl'
},
'page1Content': {
templateUrl: 'views/page1.content.htm',
controller: 'page1ContentCtrl'
}
}
})
... (repeated for page2 and page3)
.state('page1.info',{
url: '/:info',
views: {
'page1Menu': {
templateUrl: 'views/page1.menu.htm',
controller: 'page1MenuCtrl'
},
'page1Content': {
templateUrl: 'views/page1info.content.htm',
controller: 'page1InfoContentCtrl'
}
}
})
这表现了我想要的方式，但最终并不是我想要处理这样的事情。想象一下，必须为每个新部分创建一组新状态，并且可能有数百个部分。如果树比一个级别深入怎么办？
在尝试建立第三级之后，显然它不是一个可持续的设置（至少在扩展内容时效率方面）。
所以我将设置更改为完全动态，这意味着第一个设置之后的每个状态都是动态的。但是在这样做时，我现在无法弄清楚如何在点击主链接时显示子链接。
如果我使用像以前一样的视图，它们必须具有唯一的名称，并且我不知道如何在没有回到必须制作状态/控制器/等的一堆静态声明的情况下关联任何内容。
我考虑过尝试使用ng-class =“{active：$ state.includes（'whatever'）}”，但无论我怎么做都不行。我感觉这是因为它与触发链接处于同一水平：
start state link container
state link
sub links container with ng-class
end state link container
我试图为此创建一个Plunkr来说明我正在尝试做什么，但我无法让它以我在服务器上的工作方式工作。
因此我希望这些信息足以让我们了解这个想法并找到一种方法，让我的工作方式与我希望的一样。
问题1：如何让子导航仅在父级或其中一个子级处于活动状态时显示？
问题2：如何将一组动态状态有效地扩展到新的和变化的（数量）水平？
更新：有关问题2的更多信息 这里的想法是创建一种信息参考（不是维基的维基）。某些主题组仅在其下具有特定主题，而其他主题组在到达特定主题之前具有子组。例如，人员组将按字母顺序排列，但技术组将分为“运输”或“医疗”等子组。这些群体可以分为其他群体，如陆地，海洋和空气或制药和外科。
在这种情况下，目前尚不清楚所有主题需要多少级别。可能是我从上到下使用动态状态的想法根本不起作用。我可以看到为什么会出现这种情况的原因所以我的问题应该是“我可以做我想做的事吗？”而不是“如何”。
按照Bonatoc的建议，听起来让第一层状态保持静态可能会更好，然后每个子层可以根据需要制作动态，并为每个子层规划静态深度。