AngularJS+；ui路由器-具有深度链接的灯箱覆盖

我正在尝试使用AngularJS创建一个包含url深度链接的lightbox。这很好，但我需要为我希望它使用其背后的模板处理的每个页面命名它

我可以使用ui路由器和命名视图实现这一点：

<ul>
    <li><a ui-sref="home">Home</a></li>
    <li><a ui-sref="portfolio">Portfolio</a></li>
    <li><a ui-sref="videos">Videos</a></li>
</ul>
<div ui-view></div>
<div ui-view="overlay"></div>

预期行为：
-单击主页，然后单击视频=显示主页上的视频覆盖
-单击公文包，然后单击视频=在公文包页面上显示视频覆盖

实际行为：
-单击主页，然后单击视频=显示视频覆盖，后面有空白页面
-单击portfolio，然后单击videos=显示后面有空白页面的视频覆盖

---

有没有一种方法可以让命名视图在任何页面上更新，使现有的ui视图保持不变？

如果您想将其覆盖在多个状态之上，可以考虑使用视频模式而不是路由器。如果您坚持使用路由器，您可能希望将视频定义为home和portfolio的子状态，而不是在同一级别定义三个状态。

如果您希望将其覆盖在多个状态之上，您可能会考虑使用视频模式而不是路由器。如果您坚持使用路由器，您可能希望将视频定义为home和portfolio的子状态，而不是在同一级别定义三个状态

    $stateProvider
        .state('home', {
            url: '/',
            controller: 'HomeCtrl',
            templateUrl: 'html/Home.html'
        })
        .state('portfolio', {
            url: '/portfolio/:id',
            controller: 'PortfolioCtrl',
            templateUrl: 'html/Portfolio.html'
        })
        .state('videos', {
            views: {
                'overlay@': {
                    controller: 'VideosCtrl',
                    templateUrl: 'html/Videos.html'
                }
            }
        });