Angular Состояние по умолчанию для UI-маршрутизатора на одном URL-адресе

Это будет трудно объяснить, но я попробую.

Я использую UI-маршрутизатор в приложении angular и хотел бы использовать следующие URL:

/contacts
/contacts/{id}

Когда вы заходите на страницу /contacts, он получает список контактов с сервера и отображает их. Когда вы перейдете в /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"
})

Пока все хорошо. но когда вы переходите ко второму URL-адресу, родитель также активируется, поэтому он переходит на сервер, чтобы получить список контактов, даже если они не отображаются, что является отходами.

Я мог установить/контакты на "abstract: true" и использовать /contacts/list в качестве первого URL-адреса, но это не тот URL-адрес, который я хочу использовать, и мне нужно установить контроллер на родителя, потому что у меня есть некоторые логику Я хочу поместить родителя (создание навигации для этого раздела).

В идеале, когда пользователь обращается к контактам, я хотел бы, чтобы родительское состояние активировалось (для создания навигации) и запускало дочернее состояние по умолчанию, чтобы перечислить контакты без перенаправления на другой URL. Если пользователь переходит к /contacts/ 8, то он все равно будет активировать родительское состояние, но не состояние по умолчанию, поэтому он никогда не переходит на сервер, чтобы получить контакты.

Надеюсь, это имеет смысл. Я не смог создать plunkr, но парни angular UI любезно создали тот, который показывает несовершенное решение выше.

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

Ответ 1