2013-04-26 109 views
3

[编辑]angularjs:标签视图设计问题

类似问题Complex nesting of partials and templates

截至目前,是它更好地使用角UI状态溶液或我应该坚持NG-包括?


到目前为止,我的AngularJS应用程序中每个URL都有一个视图。我需要构建一个新的视图,该视图应该有3个选项卡,并且我有麻烦试图弄清楚我将如何设计视图 - 架构明智的。

请注意,这三个选项卡背后的业务模型对象是同一个。

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

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

第三个标签与第二个标签做同样的事情,但是对于另一个子集合。

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

我现在主要关心的是如何组织观点? AngularJS每页仅有1个视图的限制。

另外,我需要处理浏览器历史记录,所以当选择了一个标签页时,URL必须改变,但我必须重新加载任何数据(即我不能重新加载控制器)。

任何提示将不胜感激。

+0

您可以使用ng-show,ng-hide,ng-include等来显示基于特定变量的隐藏内容。这些可以在路线改变时在主控制器上设置。关于控制器,您可以让控制器重新加载,只需添加缓存对象,如果加载它们,则不会再次加载它们。 – Ketan 2013-04-26 19:51:03

+0

视图怎么样?编辑表单的HTML已经很大。如果我有更多(即选项卡和它们的内容),最终会变得非常大。我怎样才能分开3个标签的html? – Sam 2013-04-26 22:18:46

+0

把每个人放在他们自己的html部分文件中。使用ng-include与url。 ng-include可以和ng-show/ng-hide一起使用。 – Ketan 2013-04-26 23:14:15

回答

2

为了记录,我结束了使用UI路由器和它的状态管理,这是真棒。我花了一些时间来理解这些概念并将其付诸实践,但我设法轻松地构建了一套相当复杂的布局!

+0

我患有相同的“进入门槛”;我很难通过本地路由重新使用视图,而不是通过在每个可能有Angular驱动的普通导航方案的模板上调用ng-include来违反DRY。 – thinice 2013-06-14 16:58:38