使用ui-router，如何使用自己保留的路由创建两个不同状态的嵌套实例？

Question

我有一个页面需要嵌套状态。但不是嵌套在所有google搜索结果中的术语。 我已经在使用它了，没有问题。 我能解释的最好方法是在一系列图片中。

这是我当前设置的页面

现在，在本例中，当我单击上面的小部件之一时，说我单击了notes小部件，这是第四个选项。 将会出现以下页面

现在发生的事情是我完全过渡到新状态，我的网址从myurl.com/call/{{assessorId}}/process/processType?=1更改为myurl.com/assessor/{{assessorId}}/detail/notes

我需要做的是在第二张图片中出现该屏幕，但在第一张屏幕的下半部分，就像这张图片一样，我在MS Paint中将其裁剪

屏幕的下半部分有它自己的独立URL，当您从一个小部件移动到另一个小部件时，ui-router需要跟踪和跟踪该URL。 标题栏显示{{assessorName}} | Notes {{assessorName}} | Notes是一种自制的面包屑解决方案，可以导航回原始的小部件集。

因此，我向下导航，但是没有办法将状态实例保持在当前状态之内。 取而代之的是，我离开我的assessor.call状态，并过渡到我的assessor.detail.notes状态。

我该如何保持我的assessor.call状态，并嵌套我的

网页底部的assessor.detail.{{selectedWidget}}状态？

Answer 1

您可以在单个html页面中使用多个ui视图，例如

<div class="content">
  <div class="header" ui-view="header"></div>
  <div class="main" ui-view="main"></div>
  <div class="footer z-depth-3" ui-view="footer"></div>
</div>

现在，您可以为每个ui视图拥有单独的视图，控制器，sass / css 。 假设我有一个模块组织，其中包含三个部分，标头，页脚和主要，然后在js中我将编写

$stateProvider.state('home.organisation',
            {
                url: '^/organisation',                   
                views: {
                    'header@home': {
                        templateUrl: 'navbar@organisation.html',
                        controllerAs: 'organisationNavbar',
                        controller: 'OrganisationNavbarCntrl'
                    },
                    'main@home': {
                        templateUrl: 'organisation.html',
                        controllerAs: 'organisation',
                        controller: 'OrganisationCntrl'
                    },
                    'footer@home': {
                        templateUrl:'footer@organisation.html',
                        controllerAs: 'organisationFooter',
                        controller: 'OrganisationFooterCntrl'
                    }
                }
            });