AngularJS + ui-router - 带有深层链接的灯箱覆盖答案

【问题标题】：AngularJS + ui-router - lightbox overlay with deep linksAngularJS + ui-router - 带有深层链接的灯箱覆盖
【发布时间】：2013-11-23 12:32:10
【问题描述】：

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

我可以使用 ui-router 和命名视图来实现它：

<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>

还有 javascript：

    $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'
                }
            }
        });

预期行为：
- 单击主页，然后单击视频 = 在主页上显示视频叠加
- 单击投资组合，然后单击视频 = 在投资组合页面上显示视频叠加

实际行为：
- 单击主页，然后单击视频 = 显示视频叠加，后面有空白页
- 点击投资组合，然后点击视频 = 显示视频叠加，后面有空白页

有没有办法让任何页面上的命名视图更新，而现有的 ui-view 保持不变？

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

如果您想将模式叠加在多个状态之上，您可能会考虑使用模式而不是路由器来显示视频。如果您坚持使用路由器，您可能希望将视频定义为家庭和投资组合的子状态，而不是在同一级别定义三个状态。

【讨论】：