Question

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

HEADER（所有页面都相同）
HORIZONTAL MENU（所有页面共有）
CONTENT（这是唯一会改变的内容）
FOOTER（所有页面共有）

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

我还有一个简单的 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 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'
      }
    }
  });

多个命名视图未显示

1 个答案: