AngularJS + ui路由器 - 灯箱覆盖深层链接

Question

我想使用AngularJS创建一个包含url深度链接的灯箱。这工作正常，但我需要为每个我希望它与它后面的模板工作的页面命名。

我能得到这个使用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> 

和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完好无损？

Answer 1

如果您想将它覆盖在多个状态之上，您可以考虑使用视频的模式而不是路由器。如果您坚持使用路由器，则可能需要将视频定义为家庭和投资组合的子状态，而不是在同一级别定义三种状态。