使用ng-view指令在Angular中插入不同的视图

Question

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

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

/signin 
/users 
/users/:id

我点击了登录路线(/signin)，并且登录视图已插入<ng-view>中的index.html。登录视图是一个包含用户名和密码的简单表单。

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

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

中做到这一点

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

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

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

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

如果没有一些棘手的修复，我该如何完成这项工作？

Answer 1

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

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

如果要使用两种以上不同的布局，则根据当前路径切换元素的可见性是一种快速的方法来处理混乱的代码和许多嵌套的条件语句。

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