javascript - Angularjs UI-Router : How to create view inside nested view?(3层嵌套 View )

Question

我正在尝试使用UI-Router在嵌套 View 内创建 View

代码

.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'
                        }
                    }
                }
            }

    });

您可以像这样可视化 View

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

UI 工作正常，直到 --groupBase/groupView 但 disucussionView 没有加载到 groupView

Answer 1

有a worknig plunker

可以在一种状态内嵌套 View 。 状态的 View :{}设置必须包含所有这些 View :

.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>'
    },
  }

});

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

• 第一个 View ('views/groups/groupBaseView.html')被注入(inject)到index.html内的未命名ui View
• 第二个 View ('views/groups/groupView.html')被注入(inject)到'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