angular-ui/ui-router 具有默认视图的父状态

Question

我正在尝试在 3 列布局中定义状态，其中左列具有相同的内容。但是此时，我不得不为所有直接嵌套状态重复templateUrl。

.state('workspace', {
  url: '/',
  templateUrl: 'app/workspace/workspace.view.html'
})
.state('workspace.images', {
  url: 'images',
  views: {
    'sidebar': { 
      templateUrl: 'app/workspace/sidebar.view.html',
      controller : 'Workspace.SidebarController as vm'
    },
    'content': {
      templateUrl: 'app/workspace/imageslist.view.html',
      controller : 'Workspace.ImagesListController as vm'
    }
  }
})
  .state('workspace.images.edit', {
    url: '/:key',
    templateUrl: 'app/workspace/editor.view.html',
    controller : 'Workspace.EditorController as vm'
  })
.state('workspace.documents', {
  url: 'documents',
  views: {
    'sidebar': { 
      templateUrl: 'app/workspace/sidebar.view.html',
      controller : 'Workspace.SidebarController as vm'
    },
    'content': {
      templateUrl: 'app/workspace/documentslist.view.html',
      controller : 'Workspace.DocumentsListController as vm'
    }
  }
});

如您所见，我每次都必须重复 "sidebar" 模板。我希望能够从抽象 workspace 状态配置它。

workspace.view.html 包含 "sidebar" 和 "content" 观看次数：

<div class="sidebar" ui-view="sidebar">
      <!-- view = sidebar -->
</div>
<div class="content" style="height: 100%" ui-view="content">
      <!-- view = content-->
</div>

我想我应该有一个 views 对象进入 "workspace" 状态来定义 "sidebar" 模板和控制器并将 "content" 留空。并尝试使用和不使用命名视图但没有成功。当我这样做时，侧边栏模板从未显示但似乎已加载（名称错误导致我的控制台出现 404）。

Answer 1

这会将侧边栏注入父级...并且子级可以使用它甚至更改它：

.state('workspace', {
  url: '/',
  views: {
    '': { templateUrl: 'app/workspace/workspace.view.html' }
    'sidebar@workspace': { 
      templateUrl: 'app/workspace/sidebar.view.html',
      controller : 'Workspace.SidebarController as vm'
    },
  }
})
.state('workspace.images', {
  url: 'images',
  views: {
    'content': {
      templateUrl: 'app/workspace/imageslist.view.html',
      controller : 'Workspace.ImagesListController as vm'
    }
  }
})
...

我们甚至在父状态上也使用了 views : {}。默认unnamed就是原来的workspace.view.html

我们还添加了命名视图 'sidebar@workspace' - 这里的绝对名称意味着名称是 'sidebar' 并且它的目标是在 'workspace' 状态模板

angular-ui/ui-router 具有默认视图的父状态

angular-ui/ui-router parent state with a default view

javascript

state

angularjs

angular-ui-router