angularjs：选项卡式视图设计问题

Posted 2023-02-22

【中文标题】angularjs：选项卡式视图设计问题

【英文标题】：angularjs: tabbed view design issue

【发布时间】：2013-04-21 01:23:30

【问题描述】：

[编辑]

与Complex nesting of partials and templates类似的问题

到目前为止，使用 Angular-UI 状态解决方案更好还是我应该坚持使用 ng-includes ？

---

到目前为止，我的 AngularJS 应用程序中的每个 URL 都有一个视图。我需要构建一个新视图，它应该有 3 个选项卡，但我在试图弄清楚我将如何设计视图时遇到了麻烦——即架构方面的问题。

请注意，这 3 个选项卡后面的业务模型对象是同一个。

第一个选项卡用于查看和编辑业务对象上的数据。所以这已经是第一个选项卡中的两个“视图”了。

第二个选项卡用于查看显示来自业务对象子集合的数据的分页表。

第三个选项卡与第二个选项卡执行相同的操作，但用于另一个子集合。

显然，我不想一次加载整个业务对象。只有当用户导航到第二个或第三个选项卡时，我才会加载集合。

我现在主要关心的是如何组织视图？ AngularJS 有这个限制，每页只有 1 个视图。

另外，我需要处理浏览器历史记录，因此在选择选项卡时 URL 必须更改，但我必须重新加载任何数据（即我不能重新加载控制器）。

任何提示将不胜感激。

【问题讨论】：

您可以使用 ng-show、ng-hide、ng-include 等来显示基于某些变量的隐藏内容。这些可以在路由更改时在主控制器上设置。关于控制器，你可以让控制器重新加载，只需添加缓存你的对象，如果它们被加载就不会再次加载它们。

视图怎么样？编辑表单的 html 已经非常大了。如果我有更多（即选项卡及其内容），那最终会变得非常大。如何分离 3 个选项卡的 html ？

把每一个放在自己的html部分文件中。将 ng-include 与 url 一起使用。 ng-include 可以与 ng-show / ng-hide 一起使用。

好吧，不知何故，必须手动实现所有这些逻辑似乎有点奇怪。使用路由和视图更容易处理。可惜每页不允许多次查看

我已经更新了我原来的帖子，我现在想知道我是否应该使用 Angular-UI 状态解决方案？我不愿意使用 3rd 方解决方案，但另一方面 AngularJS 路由系统似乎是它的致命弱点

【参考方案1】：

为了记录，我最终使用了 ui-router 及其状态管理，这太棒了。我花了一些时间来理解这些概念并将其付诸实践，但我设法毫不费力地构建了一组非常复杂的布局！

【讨论】：

我正在遭受同样的“进入障碍”；我很难理解无法通过本机路由真正重用视图，而不是通过在每个可能具有同样由 Angular 驱动的通用导航方案的模板上调用 ng-include 来违反 DRY。