我需要 parallel/sticky 个州吗？

Question

当页面第一次导航到时，我希望地图视图在详细视图中不显示任何内容。当从下拉列表中选择某些内容时，我希望状态发生变化，并且它的视图在详细视图中可见，而地图视图仍然可见。

偶尔（这就是问题所在），我希望能够在详细信息视图中单击 link，导航到详细信息视图仍然可见但地图视图切换到数据视图。

默认 ui-router api 是否可行，或者我需要 sticky/parallel 状态吗？

编辑：是的，没有粘性状态是可能的

这是布局：

更新：

               default layout
-----------------------------------------
|       [dropdown][dropdown][dropdown]  
|------- --------------------------------
| [details |
|   view]  |          [viewport view]
|          |              
|          |          
|          |                                
------------------------------------------

用户导航到页面：基本上是一个 default state，其中唯一可见的视图是 viewport view 和 MAP template。
用户从 default state/布局中选择一个下拉选项。
状态应转换为 default.detailX state（将有几个不同的详细状态）。在每个 default.detailX states 中，details view 现在应该与相应的 detailX template 一起可见。 viewport view 应保持可见，同时显示 MAP template。

这里是我开始遇到问题的地方，根据期望的行为和评论中的建议，我认为这里应该发生的是：

用户在 default.detailX 中点击 link，应用程序应过渡到 default.detailX.data state，其中视口从 MAP template 切换到 DATA template

这是正确的做法吗？是的。

再次更新解决方案（感谢shershen的指导）：

$stateProvider
            .state('default', {
                url: '/mpkapp',
                views: {
                    '': {
                        templateUrl: 'templates/layout.html'
                    },
                    'viewport@default': { template: '<state-map />' }
                }
            })
            .state('default.districtdetails', {
                url: '/districts/:districtid/details',
                params: { districtid: null },
                views: {
                    'detail': { template: '<div district-details-view></div>' }
                }
            })
            .state('default.districtdetails.data', {
                url: '/districts/:districtid/usage?=:districtname&=:mfgid&=:manufacturername',
                views: {
                    'detail': { template: '<div district-details-view></div>' },
                    'viewport@default': {
                        templateUrl: 'templates/product.usage.html',
                        controller: 'ProductUsageController'
                    }
                }
            })
            .state('default.districts', {
                url: '/county/:fips?=:county',
                params: { fips: null, county: null },
                views:
                {
                    'detail': { template: '<div county-district-list></div>' }
                }
            })
            .state('default.distributordistricts', {
                params: { distributorid: null, distributorname: null },
                url: '/distributors/:distributorid/districts?=:distributorname',
                views:
                {
                    'detail': {
                        template: '<div distributor-district-list></div>'
                    }
                }
            })

这样做我可以从 default 的子状态更改 viewport view，同时它在其兄弟状态中保持不变。

Answer 1

状态与视图的组合都是可能的。有些州可能会显示相同的视图，而其他州可能会在同一位置显示不同的模板。更多相关信息：Multiple Named Views。可以是这样的：

在模板中

<ui-view name="dropdown"></ui-view> //top
<ui-view name="detail"></ui-view> //left
<ui-view name="centralblock"></ui-view> //main area

在状态配置中

$stateProvider.state('state', {
 views: {
      'dropdown': { //always shown, add templates and/or controllers },
      'detail': {},
      'centralblock': { //show map template here },
    }
}).state('state2', {
 views: {
      'dropdown': { //always shown, add templates and/or controllers },
      'detail': {},
      'centralblock': {//show data template here},
    }
})

我需要 parallel/sticky 个州吗？

Do I need parallel/sticky states?

angularjs

angular-ui

angular-ui-router

更新：

再次更新解决方案（感谢shershen的指导）：