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'
    }
  }
});

如您所见，我每次都必须重复“侧边栏”模板。我希望能够从抽象的工作区状态配置它。

workspace.view.html 包含“侧边栏”和“内容”视图：

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

我想我应该有一个views对象进入“工作区”状态来定义“sidebar”模板和控制器并离开 “内容”为空。并尝试过有和没有命名的观点，但没有成功。当我这样做时，侧边栏模板永远不会显示但似乎被加载（错误的名称导致我的控制台中的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 : {}。默认的未命名是原始workspace.view.html

我们还添加了命名视图 'sidebar@workspace' - 此处的绝对名称表示名称为＆＃39;侧栏＆＃39;并在“工作空间”内搜索其目标。州模板

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

1 个答案: