Angular UI-Router: дочерний элемент с родительским представлением

В форме истории:

То, что я ищу здесь, - это настройка мастер-детали. Мастер находится в форме списка, и когда я нажимаю ссылку (относительно конкретной строки/записи (или Учетная запись в этом случае)), я хочу видеть детали в главном представлении (буквально, "основной" вид: <div class="container" ui-view="main"></div>).

Я хочу сделать это и сохранить свою структуру URL-адресов (/accounts для списка учетных записей; /accounts/:id для подробной версии) , но я хочу, чтобы представление детали использовало представление, в котором использовался список.

В настоящее время у меня

index.html

...
<div class="container" ui-view="main"></div>
...

accounts.js

$stateProvider
    .state ('accounts', {
        url: '/accounts',
        views: {
            'main': {
                controller: 'AccountsCtrl',
                templateUrl: 'accounts/accounts.tpl.html'
            }
        },
        data: { pageTitle: 'Account' }
    })
    .state ('accounts.detail', {
        url: '/:id',
        views: {
            'main': {
                controller: 'AccountDetailCtrl',
                templateUrl: 'accounts/detail.tpl.html'
            }
        },
        data: { pageTitle: 'Account Detail' }
    });

На этом этапе маршрут /accounts работает так, как ожидалось. Он отображает accounts/accounts.tpl.html правильно в представлении main. В этом html каждая строка в ретрансляторе связывает его с соответствующим URL /accounts/:id, с которым я обрабатываю вложенное состояние accounts.detail.

Что очевидно для большинства из вас, кто знает больше, чем я, мой accounts.detail будет отображать представление main , если этот именованный вид существует в шаблоне accounts/accounts.tpl.html, Это действительно так.

Но это не то, что я хочу. Я хочу, чтобы материал accounts.detail отображался в родительском представлении main; Я хочу, чтобы html accounts/detail.tpl.html заменил html accounts/accounts.tpl.html, найденный в index.html: <div class="container" ui-view="main"></div>.

Итак, как я мог это сделать?

МОЕ РЕШЕНИЕ В КОНТЕКСТЕ Трюк заключается в том, что, как говорится в ответе, настроить схему URL для определения того, какое дочернее состояние является "по умолчанию". То, как я интерпретирую этот код на простом английском языке, состоит в том, что родительский класс является абстрактным с правильным URL-адресом, а дочерний класс "по умолчанию" имеет "тот же" URL-адрес (обозначается '').

Если вам нужна дополнительная ясность, просто опубликуйте комментарий, и я поделюсь советами.

.config(function config( $stateProvider ) { $stateProvider
    .state ('accounts', {
        abstract: true,
        url: '/accounts',
        views: {
            'main': {
                templateUrl: 'accounts/accounts.tpl.html',
                controller: 'AccountsCtrl'
            }
        },
        data: { pageTitle: 'Accounts' }
    })
    .state ('accounts.list', {
        url: '',
        views: {
            'main': {
                templateUrl: 'accounts/list.tpl.html',
                controller: 'AccountsListCtrl'
            }
        },
        data: { pageTitle: 'Accounts List' }
    })
    .state ('accounts.detail', {
        url: '/:id',
        views: {
            'main': {
                templateUrl: 'accounts/detail.tpl.html',
                controller: 'AccountDetailCtrl'
            }
        },
        data: { pageTitle: 'Account Detail' }
    });