Question

遵循本教程：https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views，我可以创建一个在根模板中定义多个视图的应用程序。我需要通过将tabledata和graph放到名为content的子视图中来稍微修改该方案。我希望我的观点看起来像这样：

的index.html

<body>
  <div ui-view="header"></div>
  <div ui-view="content"></div>
</body>

content.html

<div ui-view="tabledata"></div>
<div ui-view="graph"></div>

我的路线看起来像那样：

# ...

.state('videos',
  url:         '/videos'
  templateUrl: 'content.html'
  views:
    'tabledata':
      templateUrl: 'tabledata.html'
      controller:  '...'

    'sidebar':
      templateUrl: 'graph.html'
      controller:  '...'
)

但是，当我的浏览器指向/videos时，tabledata.html和graph.html模板未加载到相应的视图。如果我将tabledata和graph次观看到 index.html

，那么一切都会很有效

我确信我的代码确实存在问题，但我无法确定究竟是什么，也不知道谷歌。

Answer 1

据我所知，在多个命名视图中只能有多个ui-view，即在状态定义中明确声明views属性时。我不完全确定你追求的是什么，但是如果你想控制ui-views加载状态的位置，你可以使用你提供的链接使用抽象状态：

视图覆盖州的模板属性

如果你定义了一个视图对象，你的状态是templateUrl，模板和   templateProvider将被忽略。所以在你需要的情况下   这些视图的父布局，可以定义一个抽象状态   包含一个模板，以及布局状态下的子状态   包含'views'对象。

这就是我的建议：

.state('videos',{
  url:         '/videos',
  templateUrl: 'content.html',
  abstract: true})
.state('videos.xyz',{
  url: '/xyz',//you can leave this empty if you like
  {
    views:{
    'tabledata':{
      templateUrl: 'tabledata.html'
      controller:  '...'
      },

    'sidebar':{
      templateUrl: 'graph.html'
      controller:  '...'
     }
  }
 })

如果您不希望将xyz附加到您的网址，只需为状态videos.xyz的url属性传入一个空字符串。我一直都在使用这种方法，让我知道你是不是在追求它。

没有嵌套状态的嵌套视图

的index.html

content.html

1 个答案: