本文介绍了如何在 AngularJS 中设置嵌套视图?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个带有各种屏幕的应用程序.每个屏幕都分配了一个 URL,例如 #mailscontacts 等.

I have an application with various screens. Each screen is assigned a URL, such as #, mails, contacts, and so on.

在我的主 HTML 文件中,我有一个 ng-view 元素,它根据用户选择的路线进行更新.到目前为止,一切都很好.

In my main HTML file I have an ng-view element which updates according to the route the user selects. So far, so good.

现在,其中一些屏幕具有子导航.例如,#mails 确实有一个收件箱和一个已发送文件夹.他们向自己展示了两列:左侧的子导航,右侧相应文件夹的邮件.

Now some of these screens have a sub-navigation. E.g., #mails does have an inbox and a sent folder. They present themselfes with two columns: The sub-navigation on the left, the mails of the appropriate folder on the right.

当您导航到 #mails 时,它会将您重定向到 #mails/inbox,因此基本上 inbox 是默认子查看邮件.

When you navigate to #mails, it shall redirect you to #mails/inbox, so that basically inbox is the default sub-view for mails.

我该如何设置?

我目前能想到的唯一方法(我对 AngularJS 很陌生,因此如果这个问题有点幼稚,请原谅我)是有两个视图,一个用于 #mails/inbox,另一个用于 #mails/sent.

The only approach I can currently think of (I am quite new to AngularJS, hence forgive me if this question is a little bit naive) is to have two views, one for #mails/inbox, and the other for #mails/sent.

当您选择路线时,会加载这些视图.当您选择 #mails 时,它只会将您重定向到 #mails/inbox.

When you select a route, these views are loaded. When you select #mails it simply redirects you to #mails/inbox.

但这意味着两个视图都必须使用 ng-include 进行子导航.不知怎的,这让我觉得不对劲.

But this means that both views must use an ng-include for the sub-navigation. Somehow this feels wrong to me.

我更想要的是嵌套视图:顶部的在邮件、联系人等屏幕之间切换,底部的在收件箱、已发送等子视图之间切换.

What I'd like more is to have nested views: The top one switches between screens such as mails, contacts, and so on, and the bottom one changes between sub-views such as inbox, sent, and so on.

我该如何解决这个问题?

How would I solve this?

推荐答案

AngularJS ui-router 解决了我的问题:-)

AngularJS ui-router solved my issues :-)

这篇关于如何在 AngularJS 中设置嵌套视图?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

06-25 05:04