0

任何人都可以帮助我解决我遇到的这个视图问题。这是一个假设的例子，所以没有代码可看。

所以说我有一个简单的网站，有三个路线

/signin 
/users 
/users/:id

我点击了登录路线(/signin)，登录视图被插入<ng-view>到index.html. 登录视图是一个带有用户名和密码的简单表单。

成功登录后，我到达用户列表视图(/users)，其中包含页眉、页脚、左侧导航和用户列表作为中间的主要内容。

然后，我单击列表中的用户，然后转到用户详细信息页面(/users/:id)。我现在遇到的问题是我只想更新主要内容。我不想继续在视图中插入页眉、页脚和左导航。所以为了解决这个问题，我可以在我的 index.html 中做到这一点

<header/>
<left-nav/>
<div ng-view></div>
<footer/>

现在，当我更改路线时，仅更改主要内容，但我现在遇到的问题是，如果我返回登录屏幕，它现在包含我不想要的页眉、页脚和导航。

理想情况下这是我想要的。

  • 转到登录页面。
  • 登录视图被插入。
  • 成功登录。
  • 用户列表视图被插入。包含页眉、页脚、导航和包含用户列表的主要内容。
  • 单击列表中的用户。
  • 用户详细信息页面显示在主要内容中。页眉、页脚和导航保持不变。

我如何在没有一些棘手的修复的情况下完成这项工作？

4

1 回答 1

1

你想要的基本上是一个嵌套的视图和状态。这样/parentlike下/parent/:id的所有路由都具有相同的布局。截至目前，角度 ngRoute 不支持嵌套的 ng-views。有两种方法可以解决这个问题

  1. 使用 ng-include 和单独的服务来处理路由逻辑，即何时使用 ng-include 来获取此路由的布局（页眉、页脚、菜单）以及什么类型。
  2. 使用ui-router支持开箱即用的嵌套路由，并且迟早会被合并到 angular-core 中。

如果您要拥有两个以上不同的布局，则根据当前路线切换元素的可见性是处理混乱代码和大量嵌套条件语句的快速方法。

希望这个例子对JsBin Example 有所帮助。随意询问有关嵌套视图的其他问题。

于 2014-01-31T10:33:45.460 回答