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

То, что я ищу здесь, является настройкой мастер-детали. Мастер находится в форме списка, и когда я нажимаю на ссылку (относительно определенной строки / записи (или в данном случае для учетной записи)), я хочу видеть детали в главном представлении (буквально, в «главном» представлении:<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 каждая строка в повторителе связывает его с соответствующим/accounts/:id URL, который я обрабатываю с помощью вложенного состояния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' }
    });