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 with name 我计划在同一页面中拥有多个视图。我还有其他一些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

我们必须同时使用views对象：

  .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在＆＃34;报告＆＃34;内部搜索侧边栏。国家观点......

检查行动here

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

1 个答案: