Question

这很难解释，但我会尝试。

我在角度应用中使用UI路由器，并希望使用以下URL：

/contacts
/contacts/{id}

当您访问/联系人页面时，它将从服务器获取联系人列表并显示它们。当你转到/ contacts / 1时，它将从服务器获得联系人1记录并显示它。

我的代码目前看起来像这样：

.state('contacts', {
    url: "/contacts",
    templateUrl: "templates/contacts.tpl.html",
    controller: "ContactsCtrl"
})
.state('contacts.contact', {
    url: "/{contactID}",
    templateUrl: "templates/contact.tpl.html",
    controller: "ContactCtrl"
})

到目前为止一切顺利。但是当你转到第二个网址时，父母也会被激活，所以它会去服务器获取联系人列表，即使它们没有显示，这也是一种浪费。

我可以将/ contacts设置为“abstract：true”并使用/ contacts / list作为第一个URL，但这不是我想要使用的URL，我需要在父级上设置一个控制器，因为我确实有一些逻辑我想放在父级（为该部分创建导航）。

理想情况下，当用户点击/联系人时，我希望父状态激活（创建导航）并运行默认子状态以列出联系人而不重定向到另一个URL。如果用户转到/ contacts / 8那么它仍会激活父状态而不是默认状态，因此它永远不会到服务器来获取联系人。

我希望这是有道理的。我无法创建一个plunkr，但Angular UI的人员创建了一个显示上面不完美的解决方案。

http://plnkr.co/edit/gmtcE2?p=preview

Answer 1

我可以将/ contacts设置为“abstract：true”

这将是正确方法的一部分。父状态不应加载不适用于子项的数据，但您的状态树不必完全反映您的URL结构。例如：

.state('contacts', {
    abstract: true,
    url: "/contacts",
    /* Various other settings common to both child states */
})
.state('contacts.list', {
    url: "", // Note the empty URL
    templateUrl: "templates/contacts.tpl.html",
    controller: "ContactsCtrl"
})
.state('contacts.item', {
    url: "/{id}",
    templateUrl: "templates/contact.tpl.html",
    controller: "ContactCtrl"
})

相同URL上的Angular UI-router默认状态

1 个答案: