AngularJS - 嵌套状态

Question

当使用来自UI Router 的嵌套状态时，这仅在您通过嵌套导航页面时才有效。即：

如果我有

.state('home', {
    url: '/',
    templateUrl: 'home.html'
    ...
})
.state('home.page', {
    url: '/page',
    templateUrl: 'page.html'
    ...
})
.state('home.page.sub' , {
    url: '/page/sub',
    templateUrl: 'sub.html'
    ...
})

现在的问题是如果我直接访问/page/sub而不去/然后点击链接去/page最后导航到/page/sub，那么链接不正确并且元素页面不会完全加载。

如何解决这个链接问题？

Answer 1

在这里可以找到几乎相同的问题：

• angular ui-router parent url set to /

我创建了plunker，展示了一个工作示例。这里的诀窍是使用 ui-router 功能之一：

• Absolute Routes (^)

正如我们在下面的 plunker/code sn-p 中观察到的，我们必须调整状态定义。我们需要能够仅通过传递的 url 路由来区分状态

1) 第一级，home 状态，将用于路径 '/'
2) 第二级，page 状态，不会使用父 url，但会被定义为 '/page' ...从根开始。

因此ui-router 将能够决定发布哪个状态。如果没有Absolute Routes (^)，我们需要结合父母和孩子：'//page' 将是正确的路线......

.state('home', {
    url: '/',
    templateUrl: 'home.html'
    ...
})
// here is the change, see the ^
.state('home.page', {
    url: '^/page',
    templateUrl: 'page.html'
    ...
})
.state('home.page.sub' , {
    url: '/page/sub',
    templateUrl: 'sub.html'
    ...
})

现在，每个状态都可以被访问为

<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="home.page">- Page</a></li>
<li><a ui-sref="home.page.sub">- - Sub</a></li>

它的网址是：

#/          -- this is home
#/page      -- the page, in fact starting from root
#/page/sub

工作人员：plunker