Question

我有一个页面，我需要嵌套状态。但不嵌套在所有谷歌搜索结果的条款回来。我已经在使用它并且没有任何问题。我可以解释的最佳方式是一系列图片。

这是我目前设置的页面

现在当我点击上面的一个小部件时，对于这个例子，我说点击notes小部件，这是第四个选项。将出现以下页面

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

我需要做的是让第二张图片中的屏幕显示但是在第一张屏幕的下半部分内，就像这张照片我在MS Paint中拼凑了一些裁剪

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

所以我有导航，但我没有办法将该状态的实例保持在当前状态之内。相反，我会离开assessor.call状态并转换到我的assessor.detail.notes州。

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

页面底部的

assessor.detail.{{selectedWidget}}状态？

Answer 1

你可以在一个html页面中使用多个ui-view，例如

<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'
                    }
                }
            });

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

1 个答案: