多个命名视图未显示答案

【问题标题】：Multiple named views not showing多个命名视图未显示
【发布时间】：2016-11-11 11:12:54
【问题描述】：

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

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

我的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 */ }
  });

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

【问题讨论】：

我一直在研究，尝试了不同的东西，最近发现可能导致问题的是状态配置对象中的views 属性传递给$stateProvider.state()。我希望这样可以避免在每个子状态中设置这些常见视图 N 次...

标签： javascript angularjs angular-ui-router frontend

【解决方案1】：

我终于找到了解决办法。真正帮助我的是this StackOverflow post，这与我的非常相似，特别是那里显示的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'
      }
    }
  });

【讨论】：