角嵌套状态未按预期工作

Question

有人能看出为什么这不起作用吗？ /series 没有加载图库，但 /series/:id/seasons 部分正在工作。 （这不是缺少 ng-view 问题，请参阅下面的工作代码！）

angular.module('xbmcremoteApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('series', {
        url: '/series',
        templateUrl: 'app/series/series.html',
        controller: 'SeriesCtrl'
      }).state('series.gallery', {
        url: '',
        templateUrl: 'app/series/series-gallery/series-gallery.html',
        controller: 'SeriesGalleryCtrl'
      }).state('series.seasons', {
        url: '/:id/seasons',
        templateUrl: 'app/series/seasons/seasons.html',
        controller: 'SeasonsCtrl'
      });
  });

如果我把它改成这个它可以工作，但这不是我想要的：

angular.module('xbmcremoteApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('series', {
        url: '',
        templateUrl: 'app/series/series.html',
        controller: 'SeriesCtrl'
      }).state('series.gallery', {
        url: '/series',
        templateUrl: 'app/series/series-gallery/series-gallery.html',
        controller: 'SeriesGalleryCtrl'
      }).state('series.seasons', {
        url: '/series/:id/seasons',
        templateUrl: 'app/series/seasons/seasons.html',
        controller: 'SeasonsCtrl'
      });
  });

编辑和解决方案：
我的帖子缺少一些信息。为了清楚起见：
我想在调用 /seriesurl 时显示一个画廊。我想用季节网址显示季节。没有更多的意见！
找到了一个非常简单的解决方案。将 abstract 属性设置为 true 会强制 stateprovider 使用子视图。

....
.state('series', {
    abstract:true,  //adding this line makes the states work as expected
    url: '/series',
    templateUrl: 'app/series/series.html',
    controller: 'SeriesCtrl'
  })
....

Answer 1

在第一个定义中，url /series 被评估为根状态 'series'

.state('series', {
    url: '/series',          // url evaluation will stop here, because
    ...                      // there is a match for /series
  }).state('series.gallery', { // this will never be reached via url
    url: '',                   // but ui-sref="series.gallery" will work
    ...

虽然第二个映射确实区分了两种状态，但 '/series' 将导航到 'series.gallery' 状态：

.state('series', {
    url: '',                   // url like "#" will navigate there
    ...
  }).state('series.gallery', { // url /series will trigger this child state
    url: '/series',
    ...

一般来说，如果状态在 url 上是唯一的，那么它们中的每一个都应该有一些定义。所以很可能这应该按预期工作：

.state('series', {
    url: '/',                   // url like "#/" will navigate to series
    ...
  }).state('series.gallery', { // url '/series' will trigger this
    url: '^/series',
    ...

查看魔法标志：^：

• Absolute Routes (^) （引用：）

如果你想进行绝对 url 匹配，那么你需要在你的 url 字符串前面加上一个特殊符号 '^'。