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

Question

如何在ui-router中配置兄弟姐妹在父页面中共存的父子关系？我不能让子状态多个命名视图工作。

这是我的父页面：parent.html：

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

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

我的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 只允许插入一个孩子。

查看 Plunker中的代码

Answer 1

<ui-view>您示例中的s 不正确。它不是自闭合标签，当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>