添加名称为ui-view的页面变为空白

我在我的应用程序中使用Angular UI-Router。我很困惑如何在单一状态下使用多个视图。我不明白我在做什么错。添加名称为ui-view的页面变为空白

这里是我的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，我有一些文本内容。在索引中，我有链接到所有页面。仪表板和主页链接正在工作，但报告页面变为空白。这是为什么？

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

来源

2015-07-10 iCode

有updated and working plunker

我们必须使用对象视图两种：

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

也是，因为第一种观点"report.html"包含目标第二...我们必须使用绝对命名

// instead of this 
"sidebar": { 
// we need this 
"[email protected]": {

因为这会指示UI-R外部搜索的“报告”状态视图里面侧边栏...

检查它在行动here

来源

2015-07-10 09:35:18

感谢。保存我的一天:) – iCode

它对我有用 – iCode

很高兴看到这个，先生！享受令人敬畏的UI-Router;） –

添加名称为ui-view的页面变为空白

回答

相关问题