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

如果您想將它覆蓋在多個狀態之上，您可以考慮使用視頻的模式而不是路由器。如果您堅持使用路由器，則可能需要將視頻定義爲家庭和投資組合的子狀態，而不是在同一級別定義三種狀態。