具有父状态的 ui-router 模态窗口答案

【问题标题】：ui-router modal window with parent state具有父状态的 ui-router 模态窗口
【发布时间】：2015-04-24 05:51:02
【问题描述】：

有很多关于在进入特定状态时打开模式窗口的文档，有些人使用 'onEnter'，其他人使用 '$stateChangeStart' 事件。

但是我遇到的问题是，当直接访问该 url 时，模态窗口下方没有加载任何内容。

例如： 1. 用户访问 www.mysite.com 2. 用户点击打开模型的链接：www.mysite.com/#/signup 3. 用户看到注册模态窗口下面有原始内容

但是当用户直接访问 www.mysite.com/#/signup 时，这不会发生。

目前我有一个处理我所有模式窗口的父路由，如下所示：

$stateProvider
    .state('modal', {
        parent: 'home',
        abstract: true,
        url: '',
        data: {
            modal: true  
        },
        onEnter: ['$state', '$modal', function($state, $modal) {
            console.log('open modal'); 

            $modal.open({
                template: '<div ui-view="modal"></div>',
                backdrop: true
            }).result.then(function() {
                $state.go('home'); 
            }, function(reason) {
                if(!reason || reason == 'backdrop click') $state.go('home');   
            });
        }]
    });

虽然这可行，但我希望能够动态设置父路由，因为这将是我的模态窗口下方的内容。

有没有办法做到这一点？或者有没有其他方法可以让我打开带有下面任何内容的模式窗口？

【问题讨论】：

标签： angularjs modal-dialog angular-ui-router

【解决方案1】：

使用UI-Router Extra - Sticky States 帮助我解决了我的问题，当您直接打开模态框时，有一些问题没有底层状态，但这些都是可以解决的问题。 http://christopherthielen.github.io/ui-router-extras/#/sticky

【讨论】：