带有 ui-router 的 AngularJS 上的手风琴式状态

Question

我正在尝试完成一些乍一看似乎很容易，但最终却颇具挑战的事情。我有一个类似手风琴的应用程序部分，每个手风琴项目在激活时都应该打开一个子状态，还有一些额外的要求：

1. 子状态可以（也应该）是相同的子状态，但参数不同。
2. 子状态不是预先知道的，它们是动态加载的。
3. 深度链接到子状态应该可以正常工作。手风琴项展开并加载了正确的内容。

这个想法很简单，应该有一个子状态，根据传递的参数加载/显示不同的数据，但是那个子状态的模板应该放在激活的手风琴项中，而不是放在一个固定的地方。

我部分尝试了 ui-router 中的多个命名视图选项，但看起来并不乐观，因为它实际上会同时加载所有这些命名视图。另外，我需要它们动态，即使可以动态定义状态，例如使用Future states，这似乎不是正确的选择。

目前，我只能看到 2 个选项：

1. 在所需的手风琴项中重新设置 ui-view 的父级（第一次尝试不起作用，但如果我重新设置 ui-view 的容器的父级）但在测试后有错误的副作用，并且我担心以后会出现一些严重的副作用。基本上，父控制器第二次重新加载，将前一个实例保留在内存中。另外，我甚至在父级范围之外的地方看到了一些重复的 DOM 内容。我当然不喜欢这种方法，但它的好处是可以将我需要的内容实际放置在我需要的容器中。
2. 将 ui-view 留在手风琴之外，定位绝对它，并在导航时根据当前状态管理它的位置。绝对位置不是什么大问题，但我需要不断测量内容的高度，并动态设置展开的手风琴项的高度，使其看起来像是在里面：S。为了让事情变得更加困难，我可能不得不设置一些复杂的规则来正确定位它以满足这种需要的响应式设计。

归根结底，这是一个路线/代码破解与视觉破解。我正在接受视觉破解，因为它听起来更安全，但肯定会做更多的工作。任何其他方法或 cmets 都将受到高度的赞赏。

-- 编辑--

至少对于我想到的 2 个选项，有一个更好的选择：创建不同的子状态（1 个子状态，带参数）但不将其与模板相关联。只需将所有 DOM 留在父状态/视图中，并使用 ng-if 管理可见性

Answer 1

您是否考虑过仅使用一个子状态并使用状态参数传递您需要的附加信息的选项？

所以有你想要打开的手风琴节ID的URL参数和不同数据的其他参数来显示。

然后根据 stateParamter 打开正确的手风琴部分。编写一个具有私有范围的指令来呈现该部分的内容，并在每个手风琴中重用相同的指令并将正确的数据传递给它。

然后，如果用户单击打开另一个手风琴部分，则使用$state.go('myState, {accordion-id: 'newidtoopen', datatoShow: dataids}) 代替正常的“打开”操作。