添加名稱爲ui-view的頁面變爲空白

Question

我在我的應用程序中使用Angular UI-Router。我很困惑如何在單一狀態下使用多個視圖。我不明白我在做什麼錯。

這裏是我的Plunkr http://plnkr.co/edit/dJNnNNuJ5NvnauTwKrih?p=preview

我的路由confguration

app.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('home', { 
      url: "/home", 
      templateUrl: "home.html", 
      controller: 'HomeCtrl' 
     }) 
     .state('dashboard', { 
      url: "/dashboard", 
      templateUrl: "dashboard.html", 
      controller: 'DashboardCtrl' 
     }) 
     .state('report', { 
      url: "/report", 
      templateUrl: "report.html", 
      controller: 'ReportCtrl', 
      views: { 
      "sidebar": { 
       templateUrl: "sidebar.html", 
       controller: 'SideBarCtrl', 
       } 
      } 
     }) 
    $urlRouterProvider.otherwise('/home'); 
}); 

在報告頁面，我有一個UI視圖名稱爲我刨在同一個頁面多個視圖。另外我還有其他一些HTML。

我report.html

<div> 
    <div ui-view="sidebar"></div> 
    <div class="panel panel-default"> 
     <div class="panel-headingr"> 
      Panel Title 
     </div> 
     <div class="panel-body"> 
      This page is temporarily disabled by the site administrator for 
      some reason.<br> <a href="">Click here</a> to enable the page. 
     </div> 
    </div> 
</div> 

在sidebar.html，我有一些文本內容。在索引中，我有鏈接到所有頁面。儀表板和主頁鏈接正在工作，但報告頁面變爲空白。 這是爲什麼？

我正在使用所有腳本的最新版本。

Answer 1

有updated and working plunker

我們必須使用對象視圖兩種：

.state('report', { 
     url: "/report", 
     views: { 
     "": { 
     templateUrl: "report.html", 
     controller: 'ReportCtrl', 
     }, 
     "sidebar@report": { 
      templateUrl: "sidebar.html", 
      controller: 'SideBarCtrl', 
     } 
    } 
    }) 

也是，因爲第一種觀點"report.html"包含目標第二...我們必須使用絕對命名

// instead of this 
"sidebar": { 
// we need this 
"sidebar@report": { 

因爲這會指示UI-R外部搜索的「報告」狀態視圖裏面側邊欄...

檢查它在行動here