在stateprovider中填充嵌套视图

Question

Here is a plunker I am working on。我是stateProvider的新手，我正在尝试嵌套视图。我几乎我做搞砸视图中查看：

.state('canvas',{ 
      name: 'canvas', 
      url: '/', 
      views:{ 
       '': {templateUrl:'welcome-page.html'}, 
       'carousel1@canvas': { 
        templateUrl: 'carousel-detail.html', 
        views:{ 
         'carouselDetail@carousel1' : {template: '<h2>Carousel-1 child view</h2>'} 
          } 
       }, 
       'carousel2@canvas': {template: '<h2>Carousel2</h2>'}, 
      }, 
}) 

能否请你帮我渲染carouselDetail视图。

Answer 1

严格来说，你不能。

首先，您不能在视图内嵌套视图 - 意味着视图内没有子视图，没有声明子状态。因此，您的carousel1和carousel2可以是兄弟的意见，但是您不能将carousel1-child作为其子视图carousel1而不将其声明为子状态。如果您想要嵌套视图，则必须声明子状态，并使用<div ui-view></div>来填充子视图。您可以阅读文档here。

第二，假设你要声明一个孩子状态，那么你将再次遇到问题 - 你将失去carousel1和carousel2的并行性（是否有这样一个单词？）。为什么？因为你不能同时拥有两个状态 - 这实际上是一个状态机的严格定义，这正是ui-router正在做的。但是，如果您确实想要平行状态，请使用christopherthielen的ui-router-extra。 ui-router的这个扩展允许你一次激活多个状态，并且可能是你想要的用例。我为您创建了plnkr。

附加：当您发布您的plnkr时，请检查它是否真的可以重现，您想要提出的问题 - 仅仅因为您复制粘贴文件路径而出现多个404错误。