以角度切换选项卡时保持选项卡状态

Posted 2023-03-05

【中文标题】以角度切换选项卡时保持选项卡状态

【英文标题】：keeping tab state when switching tabs in angular

【发布时间】：2014-07-10 14:59:40

【问题描述】：

我有一个带有 angular-ui-bootstrap 的 Angular 应用程序，它具有动态选项卡（其中包含不同的视图）。 似乎当您选择一个选项卡时，以前选择的选项卡内容会在我返回时被丢弃并重新加载。 我正在寻找一种方法来保存选项卡内容的状态。

我发现这个示例显示了我想要的内容，但是因为它们将选项卡的状态存储在父视图模型中，并且我的应用程序具有动态选项卡，所以这不是一个可行的解决方案 http://odetocode.com/blogs/scott/archive/2013/08/14/dynamic-tabs-with-angularjs-and-ui-bootstrap.aspx

这里他们建议不要使用标签，而只是显示/隐藏是一种方式： angular ui-router maintaining state between tabs

但这是唯一的方法/最好的方法吗？

【问题讨论】：

您是要保存模型绑定还是关闭选项卡的 DOM？

both.. 迄今为止我发现的最令人印象深刻的解决方案是来自 ui-router-extras 的粘性状态：christopherthielen.github.io/ui-router-extras/example/sticky/…

【参考方案1】：

不要使用这个。创建您自己的选项卡并在 DOM 中加载它们的内容。一次只显示一个。您也应该更改角度隐藏方式，因为它不应该像您期望的那样在 chrome 上工作。默认为 display: none 或 hidden（不要记住）和 chrome 可能会从 perf 中删除它。

您可以将您的 div 放在屏幕之外或其他东西上，调整位置和不透明度....

【讨论】：

这不是 css 问题，而是 Angular 指令之一。我不知道有角度的 ui 选项卡，但从他发布的内容来看，当您切换选项卡时，DOM 已被删除并再次编译。