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 snippet中所观察到的，我们必须调整状态定义。我们需要能够仅通过传递的URL路由来区分状态

1）第一级，home状态，将用于路径＆＃39; /＆＃39;
2）第二级，page状态，不会使用父网址，但会被定义为＆＃39; / page＆＃39; ......从根开始。

因此ui-router将能够决定发布哪个州。如果没有Absolute Routes (^)，我们需要将父母和孩子结合起来：＆＃39; //页面＆＃39;将是正确的路线...

.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

AngularJS - 嵌套状态

1 个答案: