Angularjs UI-路由器：如何在嵌套视图中创建视图？ （3 级嵌套视图）

Question

我正在尝试使用 UI-Router

在嵌套视图中创建视图

代码

.state('discussions', {
            url: '/discussions',
            views: {
                '': {
                    templateUrl: 'views/groups/groupBaseView.html'
                },
                'leftcontainer@discussions': {
                    templateUrl: 'views/groups/groupView.html',
                    controller: 'groupController',
                    views: {
                        'rightcontainer@leftcontainer@discussions': {
                            template: 'hi'
                        }
                    }
                }
            }

    });

您可以将视图可视化为

--groupBase
--groupBase/groupView
--groupBase/groupView/discussionView

UI 在 --groupBase/groupView 之前工作正常，但是 disucussionView 没有加载到 groupView

Answer 1

您不能嵌套 "views" 属性。您必须首先定义一个子状态，然后再定义它的视图。

一个简单的例子：

.state("a", {
    views: {
        template:"<ui-view></ui-view>"
    }
})
.state("a.b", {
    views: {
        template:"<ui-view></ui-view>"
    }
})
.state("a.b.c", {
    views: {
        template:"<h1>Something</h1>"
    }
})

Answer 2

有a worknig plunker

可以在一个状态内嵌套视图。 州的 views: {} 设置必须包含所有这些视图：

.state('discussions', {
  url: '/discussions',
  views: {
    '': {
      templateUrl: 'views/groups/groupBaseView.html'
    },
    'leftcontainer@discussions': {
      templateUrl: 'views/groups/groupView.html',
      controller: 'groupController',
    },
    'rightcontainer@discussions': {
      template: '<h3>hi from right container</h3>'
    },
  }

});

有了这个，我们就可以实现视图嵌套了

• 第一个视图 ('views/groups/groupBaseView.html') 被注入到未命名的 ui-视图 index.html
• 第二个视图('views/groups/groupView.html')注入到'views/groups/groupBaseView.html'
• 第三个去'views/groups/groupView.html'

因此，'views/groups/groupView.html' 将如下所示：

<div>   
   ...
   <div ui-view="leftcontainer"></div>   
</div>

和'views/groups/groupView.html'将是：

<div>   
   ...
   <div ui-view="rightcontainer"></div>   
</div>

检查一下here