更新：

Question

首次导航页面时，我希望地图视图在详细信息视图中看不到任何内容。当从下拉列表中选择某些内容时，我希望状态更改，并且在地图视图保持可见时，它的视图在详细视图中可见。

偶尔（这就是问题所在），我希望能够点击详细信息视图中的链接，该链接导航到详细信息视图仍然可见但状态视图切换到数据视图的状态。

这可能是默认的ui-router api还是我需要sticky/parallel个状态？

编辑：是的，没有STICKYSTATES可能

这是布局：

更新：

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

用户导航到页面：基本上是default state，其中唯一可见的视图是带有viewport view的{{1}}。
用户从MAP template /布局中选择一个下拉选项州应该过渡到default state（将有几个不同的细节状态）。在这些default.detailX state中的default.detailX states中，details view现在应该与对应的detailX template一起显示。显示viewport view后MAP template仍然可见。

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

用户点击default.detailX中的链接，应用应转换为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>'
                    }
                }
            })

执行此操作我可以将viewport view从子状态default更改为在其兄弟状态中保持不变。

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},
    }
})

我需要并行/粘性状态吗？

更新：

再次使用解决方案更新（感谢shershen指示方向）：

1 个答案: