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>不正確。 它不是一個自動關閉的標簽，當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>