Question

我正在使用angular-ui-router的嵌套状态来查看我的视图。我想有两条路线：

/artists - 显示所有艺术家的主页

/artists/:id - 显示艺术家资料

因此我不希望艺术家个人资料路线与艺术家主页路线分享html。基本上我希望视图彼此隔离，但共享基本路径

.state('artists', {
    url: '/artists',
    templateUrl: 'page/to/show/all/artists.html',
    controller: 'AllArtistCtrl'
})
.state('artists.profile', {
    url: '/:artistId',
    templateUrl: 'page/to/show/artist/profile.html',
    controller: 'ArtistProfileCtrl'
})

我不希望艺术家个人资料从艺术家父路线注入<div ui-view></div>。我希望模板独立。我该如何实现呢？

Answer 1

不确定哪个视图不想插入细节 - 1）艺术家主页路线或2）艺术家父路线。因此，让我们展示如何使用这些方法中的任何一种，这应该会导致您的答案。工作plunker is here

如果我们想要将两个州（父母和孩子）注入index.html，我们必须在州定义中使用aboslute view naming

.state('artists', {
      url: '/artists',
      ...
    })
    .state('artists.profile', {
      url: '/:artistId',
      views : {
       // here we declare that we should search for a view in a root named ""
        "@" : { 
          templateUrl: 'page/to/show/artist/profile.html',
          ...
        }
      }
    })

如果我们想将细节注入父级，我们只需要在父视图中注入未命名的视图：

    .state('artists', {
      url: '/artists',
      ...
      // here we do have the same unnamed view as in a root index.html
      template: '<div><h4>this is the list </h4>' +
      ' <div ui-view=""></div></div>',

    })
    .state('artists.nested', {
      url: '/nested/:artistId', // just to distinguish url
      views : {
        // no @ === inject into parent
        "" : {
          templateUrl: 'page/to/show/artist/profile.html', 
          ...
        }
      }
    })

此处说明了视图命名和名称定位：

View Names - Relative vs. Absolute Names

检查example

嵌套网址但具有ui-router的独立模板

1 个答案: