我如何在AngularJS设置嵌套的看法?(How do I setup nested views

2019-07-21 19:21发布

我有不同的屏幕的应用程序。 每个屏幕被分配一个URL,例如#mailscontacts ,等等。

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

现在,一些屏幕有一个子导航。 例如, #mails确实有一个收件箱和发文件夹。 他们提出themselfes有两列:子导航左侧,相应的文件夹的邮件上的权利。

当您导航到#mails ,应当重定向到#mails/inbox ,这样基本上收件箱是默认子视图的邮件。

我怎么能设置呢?

目前,我能想到的唯一方法(我很新的AngularJS,所以原谅我,如果这个问题有点幼稚)是有两种观点,一种为#mails/inbox ,另一个用于#mails/sent

当您选择的路线,这些意见被加载。 当您选择#mails它只是将您重定向到#mails/inbox

但是,这意味着这两种观点必须使用ng-include为分导航。 不知怎的,这感觉我错了。

我想更多的是嵌套的观点:网之间的顶部有一个开关,如邮件,联系人等,和子视图,如收件箱,发间的底部有一个变化,等等。

我将如何解决这个问题?

Answer 1:

AngularJS UI路由器解决了我的问题:-)



Answer 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});


文章来源: How do I setup nested views in AngularJS?