如何在 AngularJS 中设置嵌套视图？

Posted 2023-02-22

【中文标题】如何在 AngularJS 中设置嵌套视图？

【英文标题】：How do I setup nested views in AngularJS?

【发布时间】：2013-03-05 19:30:31

【问题描述】：

我有一个带有各种屏幕的应用程序。每个屏幕都分配有一个 URL，例如#、mails、contacts 等。

在我的主 html 文件中，我有一个 ng-view 元素，它会根据用户选择的路线进行更新。到目前为止，一切顺利。

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

当您导航到#mails 时，它会将您重定向到#mails/inbox，因此基本上收件箱 是邮件的默认子视图。

我该如何设置？

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

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

但这意味着两个视图都必须使用ng-include 进行子导航。不知何故，这让我感觉不对。

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

我将如何解决这个问题？

【问题讨论】：

据我所知，到目前为止，除了使用 ng-include 之外别无选择。这在未来可能会改变。

查看AngularJS - Complex nesting of partials and templates 并查看Angular ui-route。

是的，@Stewie 是对的。 ng-swith 现在是正确的方法

ui-router 绝对是你想要的。看看 - 我使用它取得了巨大的成功。

【参考方案1】：

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

【讨论】：

举手同意。在我只能处理基本上单一的路线之前，但 ui-router 允许您以最少的工作/请求“隧道”到您想要的地方。

【参考方案2】：

另一个要查看的库：http://angular-route-segment.com

您可以使用它来代替内置的ng-view 和$route。

示例路由配置如下所示：

$routeSegmentProvider.

when('/section1',          's1.home').
when('/section1/prefs',    's1.prefs').
when('/section1/:id',      's1.itemInfo.overview').
when('/section1/:id/edit', 's1.itemInfo.edit').
when('/section2',          's2').

segment('s1', 
    templateUrl: 'templates/section1.html',
    controller: MainCtrl).

within().

    segment('home', 
        templateUrl: 'templates/section1/home.html').

    segment('itemInfo', 
        templateUrl: 'templates/section1/item.html',
        controller: Section1ItemCtrl,
        dependencies: ['id']).

    within().

        segment('overview', 
            templateUrl: 'templates/section1/item/overview.html').

        segment('edit', 
             templateUrl: 'templates/section1/item/edit.html').

        up().

    segment('prefs', 
        templateUrl: 'templates/section1/prefs.html').

    up().

segment('s2', 
    templateUrl: 'templates/section2.html',
    controller: MainCtrl);