不按预期工作的角嵌套状态

Question

有人能看到为什么这不起作用吗？/series没有加载库，但是/series/:id/seasons部件正在工作。(这不是一个缺少ng视图的问题，请参阅下面的工作代码！)

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时，我想显示一个图库。我想用季节图来展示季节。不许再看风景了！

找到了一个很简单的解决办法。将抽象属性设置为true将强制状态提供程序使用子视图。

....
.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',
    ...

检查魔法标志：^

• 绝对路线(^) (引用：)

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