不同的状态不显示 ui-views答案

【问题标题】：Different states don't show ui-views不同的状态不显示 ui-views
【发布时间】：2014-01-23 07:57:55
【问题描述】：

简介

我正在使用 AngularJS 和 AngularUI 模块来构建具有多个视图的管理界面。

我有一个简单的公共页面布局，它有一个 ui 视图，另一个用于管理页面，它有四个 ui 视图（页眉、侧边栏、主要、页脚）。

问题

我遇到的问题是，如果我设置 ui-view 主公共状态将不会显示登录视图，但如果我不设置 ui-view 主公共状态将显示登录视图。页眉、侧边栏和页脚适用于任何设置。即使我尝试设置绝对名称，似乎某些设置也会覆盖另一个设置。有人可以解释这里发生了什么吗？

ui-view="main" ==> 登录不显示
ui-view="" ==> 登录显示

视觉布局：

源代码（index.html）：

<body>
...
<div ui-view="public">

</div>
<div class="admin">
  <div ui-view="header"></div>
  <div ui-view="sidebar"></div>
  <div class="container" style="margin-top:60px" ui-view="">
                                                     <!-- ^ add main here  -->
  </div>
  <div ui-view="footer"></div>
</div>
...
</body>

代码示例

我设置了一个最小的完整代码示例来概述问题：

Plunker Edit

Plunker Run

【问题讨论】：

标签： javascript html angularjs angular-ui angular-ui-router

【解决方案1】：

我已经玩过您的演示，并查看了ui-router documentation。

如果您如下所示更改您的“公共”状态，那么它似乎可以工作。

原文：

.state('public', {
  url: '/login',
  title: 'Login',
  templateUrl: 'login.html'
})

更新：

.state('public', {
  url: '/login',
  views: {
    'main@': {
      title: 'Login',
      templateUrl: 'login.html'
    }
  }
})

这是一个更新的 plunkr： http://plnkr.co/edit/okBWMPpWysS9srKrcxeG?p=preview

这是您想要做的，还是您想要将login 设置为嵌套视图？

【讨论】：

这很有趣。我也刚刚得到另一个想法，它与你的不同，但也使它起作用。我为 public.login 创建了一个抽象的公共状态和另一个状态。 plnkr.co/edit/mYkxgsqVmRAMaZKME4SA?p=preview
给猫剥皮的方法不止一种 :) 我认为关键必须是 views 对象，因为这两个工作示例都有。