In Form einer Geschichte:

Was ich hier suche, ist ein Master-Detail-Setup. Der Master ist in Listenform und wenn ich auf einen Link klicke (in Bezug auf eine bestimmte Zeile / einen bestimmten Datensatz (oder in diesem Fall ein Konto)), möchte ich die Details in der Hauptansicht sehen (wörtlich "Hauptansicht"):<div class="container" ui-view="main"></div>).

Ich möchte dies tun und meine URL-Struktur beibehalten (/accounts für die Liste der Konten;/accounts/:id für die ausführliche Version)Ich möchte jedoch, dass die Detailansicht die Ansicht verwendet, die in der Liste verwendet wurde.

Was ich aktuell habe

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' }
    });

Zu diesem Zeitpunkt ist die/accounts Route funktioniert wie erwartet. Es zeigt anaccounts/accounts.tpl.html richtig in dermain Aussicht. Darinhtml Jede Zeile im Repeater verknüpft sie mit der entsprechenden/accounts/:id URL, die ich mit dem verschachtelten Status bearbeiteaccounts.detail.

Was für die Mehrheit von Ihnen, die mehr als ich darüber wissen, wahrscheinlich offensichtlich ist, meine Güteaccounts.detail wird in die Ansicht gerendertmain Wenn diese benannte Ansicht in der Vorlage vorhanden istaccounts/accounts.tpl.html. Das stimmt in der Tat.

Aber das will ich nicht. Ich will dasaccounts.detail Sachen zum Rendern im übergeordneten Elementmain Aussicht; Ich möchte das HTML vonaccounts/detail.tpl.html zuersetzen das html vonaccounts/accounts.tpl.html gefunden inindex.html: <div class="container" ui-view="main"></div>.

Wie könnte ich das erreichen?

MEINE LÖSUNG IM ZUSAMMENHANG Der Trick ist, wie die Antwort sagt, das URL-Schema einzurichten, um zu identifizieren, welcher untergeordnete Status "Standard" ist. Ich interpretiere diesen Code im Klartext so, dass die übergeordnete Klasse abstrakt mit der richtigen URL ist und die "standardmäßige" untergeordnete Klasse die "gleiche" URL hat (angezeigt durch'').

Wenn Sie weitere Klarheit benötigen, senden Sie einfach einen Kommentar und ich werde keine weiteren Anleitungen teilen.

.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' }
    });