具有多个父母的子状态/模态路径,可在多个州打开

Question

我有一个抽象profile状态,它有多个子状态(对于配置文件页面的不同选项卡),然后我希望另一个子状态的配置文件是一个模态.我已经实现了这样的事情:

$stateProvider
    .state('profile', {
        url: '/profile/:profileID',
        templateUrl: 'profile.html',
        controller: 'ProfileCtrl',
        abstract:true,
        resolve: {
            user: ...
        }
    })
    .state('profile.circles', {
        url: '',
        templateUrl: 'profilecircles.html',
        controller: 'profilecirclesCtrl',
        resolve: { circle: ... }
    })
    .state('profile.squares', {
        url: '/collections',
        templateUrl: 'profilesquares.html',
        controller: 'profilesquaresCtrl',
        resolve: { squares: ... }
    })
    .state('profile.editprofile', {
        url: '/edit',
        onEnter: ['$window','$modal', function($window, $modal) {
            $modal.open({
                templateUrl: 'editprofile.html',
                controller: 'editProfileCtrl',
                resolve: {
                    user: ...
                }
            }).result.then(function() {
                $window.history.back();
            },function() {
                $window.history.back();
            });
        }]
    })

这很有效,除了因为editprofile是正方形和圆形的兄弟,当该状态处于活动状态并且模态处于视图中时,正方形或圆形状态被卸载,并在模态关闭时再次加载.

当profile.editprofile状态处于活动状态时,有没有办法让这些状态保持活动状态？我喜欢的东西state..editprofile.

Answer 1

好吧，除非您想放弃模态实现，否则我建议您在profile.html一个 foreditprofile.html和另一个 for profilecircles.htmlor中拥有 2 个视图profilesquares.html，如下所示：

// profile.html
...
<div class="" ui-view="edit" autoscroll="false"></div>
<div class="" ui-view="content" autoscroll="false"></div>
...

// state config
$stateProvider
.state('profile', {
    url: '/profile/:profileID',
    templateUrl: 'profile.html',
    controller: 'ProfileCtrl',
    abstract:true,
    resolve: {
        user: ...
    }
})
.state('profile.circles', {
    url: '',
    views: {
        edit@: {
            templateUrl: 'editprofile.html',
            controller: 'editProfileCtrl'
        },
        content@: {
            templateUrl: 'profilecircles.html',
            controller: 'profilecirclesCtrl'
        }
    }
    resolve: { circle: ... }
})
.state('profile.squares', {
    url: '/collections',
    views: {
        edit@: {
            templateUrl: 'editprofile.html',
            controller: 'editProfileCtrl'
        },
        content@: {
            templateUrl: 'profilesquares.html',
            controller: 'profilesquaresCtrl'
        }
    }
    resolve: { squares: ... }
})

然后是实际显示/隐藏编辑配置文件视图的困难部分。但这可以通过一些切换按钮或在控制器中验证操作后完成。