javascript - 不同的状态不显示 ui-views

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

简介

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

我有一个简单的公共(public)页面布局,其中有一个 ui View ,另一个用于管理页面,有四个 ui View (页眉、侧边栏、主视图、页脚)。

问题

我遇到的问题是,如果我设置 ui-view main 公共(public)状态将不会显示登录 View ,但如果我不设置 ui-view main 公共(public)状态将显示登录 View 。页眉、侧边栏和页脚适用于任何设置。即使我尝试设置绝对名称,某些设置似乎会覆盖另一个设置。有人可以解释一下这是怎么回事吗?

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

视觉布局:

Page layout


源代码(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

最佳答案

我稍微玩了一下你的演示,并查看了 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

这是您想要做的事情,还是您正在尝试将登录设置为嵌套 View ?

关于javascript - 不同的状态不显示 ui-views,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21296426/

相关文章:

javascript - 对象未被读取 node.js

javascript - Webkit 过渡事件

javascript - 是否可以仅使用 HTML(5) 和 JavaScript 构建 Torrent 客户端?

javascript - 使用 NodeJS/AngularJS 创建到 MySQL 的 RESTful API 桥

javascript - Protractor 测试结果变化

javascript - Jquery OnClick 仅在 Firefox 中不起作用

javascript 动态更改图像 src 的位置 - NO JQuery

java - 如何捕获并记录外部 URL 链接上的点击事件?

javascript - maxLength 属性不会阻止字符进入 ExtJS MessageBox.prompt()

javascript - 无法将一个应用程序模块注入(inject)另一个 AngularJS