ui-router child 视图是多个命名视图或未命名视图

Question

如何在ui-router页面配置parent/children同胞共存的parent关系？我无法使 child state 多个命名视图正常工作。

这是我的 parent page:parent.html:

<div> I have two child pages: 
  child page1 detail: <ui-view /> and 
  child page2 detail:<ui-view />.  
  I need both pages
</div>

我不知道如何或是否应该使用 multiple-named 视图，因为多个命名视图看起来是平行且可分离的，而不是像上面的代码那样被其他文本包围。

我的 ui 路由器配置：

 $stateProvider
  .state('parent', {
    url: '/parent',
    templateUrl: 'parent.html'

  })
  .state('parent.children', {
    url: '/children',
    views: {
      'child1': {
        templateUrl: 'child1.html'
      },
      'child2': {
        templateUrl: 'child2.html'
      }
    }
  });

未命名的ui-view只允许插入一个child

见代码 Plunker

Answer 1

您示例中的 <ui-view> 不正确。它不是自闭合标记，当 ui-view 用作元素而不是属性指令时，您需要 name 属性才能使用命名视图。如果您将 parent.html 更改为以下内容，它应该可以工作。

<div> I have two child pages: 
  child page1 detail: <ui-view name="child1"></ui-view> and 
  child page2 detail:<ui-view name="child2"></ui-view>.  
  I need both pages
</div>

ui-router child 视图是多个命名视图或未命名视图

ui-router child view being multiple named views or unnamed views

uiview

angularjs

nested-views

childviews

angular-ui-router