多个命名视图未显示

Question

我正在尝试使用 ui-router 从头开始构建一个非常简单的 angular 应用程序。
每个页面都将具有相同的外观，并将包含以下 4 个部分（垂直，从上到下）：

HEADER（所有页面通用）
水平菜单（所有页面通用）
CONTENT（这是唯一会改变的内容）
FOOTER（所有页面通用）

我的 index.html 在 <body> 标签内有 <div ui-view></div>。

我还有一个简单的 html 文件 (portal.html)，其中包含每个页面的结构：

<div ui-view="header"></div>
<div ui-view="menu"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>

我已经创建了一个父状态，我在其中为每个页面设置了公共部分：

$stateProvider
  .state('portal', {
    url: '/portal',
    templateUrl: 'app/main/portal.html',
    views: {
      header: {
        templateUrl: 'app/main/section/header.html'
      },
      menu: {
        templateUrl: 'app/main/section/menu.html'
      },
      footer: {
        templateUrl: 'app/main/section/footer.html'
      }
    }
  });

还有一些子状态（每个菜单选项 - 页面一个），我将变量内容设置为每个页面：

$stateProvider
  .state('portal.home', {
    url: '/home',
    views: {
      'content@portal': {
        controller: 'HomeCtrl as homeVM',
        templateUrl: 'app/portal/home.html'
      }
    },
    resolve: { /* whatever */ }
  })

  // ... and so on ...

  .state('portal.contactUs', {
    url: '/contact-us',
    views: {
      'content@portal': {
        controller: 'ContactUsCtrl as contactUsVM',
        templateUrl: 'app/portal/contactUs.html'
      }
    },
    resolve: { /* whatever */ }
  });

但这不会在屏幕上显示任何内容...我是否遗漏了什么？

Answer 1

我终于找到了解决办法。真正帮助我的是 this Whosebug post, that is quite similar to mine, and specially the plunker example 显示在那里。

错误出现在传递给 $stateProvider.state() 的 状态配置对象 中。父状态应按以下方式设置：

$stateProvider
  .state('portal', {
    url: '/portal',
    views: {
      '@': {
        templateUrl: 'app/main/portal.html'
      },
      'header@portal': {
        templateUrl: 'app/main/public/header.html'
      },
      'menu@portal': {
        templateUrl: 'app/main/public/menu.html'
      },
      'footer@portal': {
        templateUrl: 'app/main/public/footer.html'
      }
    }
  });

多个命名视图未显示

Multiple named views not showing

javascript

frontend

angularjs

angular-ui-router