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

Question

我在我的应用程序中使用 Angular UI-Router。我很困惑如何在一个状态下使用多个视图。我也不明白我做错了什么。

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

我的路由配置

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-view 名称 我计划在同一页面中有多个视图。我还有其他一些 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中，我有一些文字内容。在索引中，我对所有页面都有 link。仪表板和主页 link 正在运行，但报告页面变为空白。这是为什么？

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

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-Router 在“报告”状态视图中搜索侧边栏...

实际查看 here

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

Page becomes blank when adding a ui-view with name

state

angularjs

angular-ui-router