使用NG-View指令在角度插入不同的视图



任何人都可以帮助我解决这个视图问题吗?这是一个假设的例子,因此没有代码可见。

所以说我有一个带有三个路线的站点简单站点

/signin 
/users 
/users/:id

我击中了登录路线(/signin),并将登录视图插入index.html中的<ng-view>。登录视图是带有用户名和密码的简单表单。

成功登录后,我到达了用户列表视图(/users),其中包含一个标题,页脚,左侧-NAV和用户列表作为中间的主要内容。

我然后单击列表中的用户,然后将我带到"用户详细信息"页面(/users/:id)。我现在遇到的问题是我只想更新主要内容。我不想继续将标题,页脚和左向插入视图。因此,要解决我可以在我的index.html

中执行此操作。
<header/>
<left-nav/>
<div ng-view></div>
<footer/>

现在,当我仅更改路线时,主要内容会更改,但是我现在遇到的问题是,如果我返回标志屏幕,现在它包含一个我不想要的标头,页脚和导航。

理想情况下,我想要的。

  • 转到登录页面。
  • 登录视图被插入。
  • 成功登录。
  • 用户列表视图将插入。包含标题,页脚,NAV和MAIN包含用户列表的内容。
  • 单击列表中的用户。
  • 用户详细信息页面以主内容显示。标题,页脚保持静态。

我如何在没有一些挂钩的情况下完成此工作?

您想要的基本上是嵌套的视图和状态。因此,/parent(例如/parent/:id)下的所有路线都具有相同的布局。截至目前,Angular Ngroute不支持嵌套的NG视图。解决此

有两种方法
  1. 使用ng include和单独的服务来处理路由逻辑,即何时使用ng include来获取该路线的布局(标题,页脚,菜单)和哪种类型。
  2. 使用ui-router支持嵌套的路由盒子,并且很可能迟早被合并到角核中。

根据当前路线切换元素的可见性是通往混乱的代码的快速方法,如果您要有两个以上的布局,则有许多嵌套的条件语句。

希望此示例有助于JSBIN示例。随时提出有关嵌套视图的其他问题。

最新更新