Question

我正在尝试使用AngularJS创建一个包含url deeplinks的灯箱。这样可以正常工作，但我需要为每个我希望它使用后面的模板处理的页面命名。

我可以使用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视图保持不变？

Answer 1

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

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

1 个答案: