Angular UI Router 只加载第一个声明的子状态答案

【问题标题】：Angular UI Router only loads first declared child stateAngular UI Router 只加载第一个声明的子状态
【发布时间】：2014-07-05 12:55:22
【问题描述】：

我在路由设置中首先放置的子状态是加载的那个。其他一切都很好。解析依赖项被继承，视图被渲染并且控制器被实例化。但是第二个子状态完全被忽略了……

app.coffee 中的路由

$stateProvider
.state 'feed',
  abstract: true
  url: '/'
  templateUrl: 'views/feed.html'
  controller: 'FeedController'
  resolve: (a bunch of them :P)
.state 'feed.timeline',
  url: ''
  views:
    'timeline':
      templateUrl: 'views/partials/feed/timeline.html'
      controller: 'FeedTimelineController'
.state 'feed.trending',
  url: ''
  views:
    'trending':
      templateUrl: 'views/partials/feed/trending.html'
      controller: 'FeedTrendingController'

index.html 中的占位符：

<div class="container">
  <div ui-view></div>
</div>

在“视图/feed.html”中：

<div ui-view="trending"></div>
<div ui-view="timeline"></div>

非常感谢任何帮助，尝试了所有我能想到的方法，但在搜索 wiki、群组、谷歌、stackoverflow 后数小时感到筋疲力尽......谢谢！

【问题讨论】：

您是否尝试过删除子州中的 url 属性或使它们与众不同？例如。 /趋势，/时间线
@rawphl 这不是想要的输出，实际上只是具有两个视图的子状态，而不是两个分离的子状态。但是非常感谢您的时间！欣赏它
您需要在您的子州使用 url。如果父状态是抽象状态，您通常将其中一个子状态的 url 留空，这样当您导航到父状态时，它将默认为具有空 url 的子状态。但是，是的，您可能想要子视图，而不是单独的子状态。

标签： javascript angularjs parent-child angular-ui-router nested-views

【解决方案1】：

我不确定您是否正确理解了 ui-router。状态基本上对应于 URL（抽象时除外）。我猜你想要一个状态，将内容放入你的状态“提要”的两个子视图中。

$stateProvider
.state 'feed',
  abstract: true
  url: '/'
  templateUrl: 'views/feed.html'
  controller: 'FeedController'
  resolve: (a bunch of them :P)
.state 'feed.index',
  url: ''
  views:
    'timeline@feed':
      templateUrl: 'views/partials/feed/timeline.html'
      controller: 'FeedTimelineController'
    'trending@feed':
      templateUrl: 'views/partials/feed/trending.html'
      controller: 'FeedTrendingController'

您不必选择“feed.index”作为名称，但它必须以“feed”开头。所以它是一个子状态。

【讨论】：

非常感谢！我现在看着解决方案感到很愚蠢。我想我应该停止通宵编码。再次感谢，伙计