39

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

在我的主 HTML 文件中，我有一个ng-view根据用户选择的路线更新的元素。到现在为止还挺好。

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

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

我怎么能设置这个？

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

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

但这意味着两个视图都必须使用 anng-include进行子导航。不知何故，这对我来说是错误的。

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

我将如何解决这个问题？

4

2 回答 2

31

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

于 2013-03-19T08:59:18.123 回答
4

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

您可以使用它来代替内置的ng-viewand $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});
于 2013-08-15T10:01:45.680 回答