Angular UI-Router: Kind mit übergeordneter Ansicht

In Geschichte Form:Angular UI-Router: Kind mit übergeordneter Ansicht

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

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

Was ich habe zur Zeit

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

An diesem Punkt die /accounts Route wie erwartet funktioniert. Es zeigt accounts/accounts.tpl.html korrekt in der main Ansicht an. In dieser html verbindet jede Zeile im Repeater es mit seiner entsprechenden /accounts/:id URL, die ich mit dem verschachtelten Zustand accounts.detail umgehen.

Was wohl offensichtlich für die meisten von euch ist, der über das mehr als ich wissen, wird meine accounts.detail die Ansicht mainmachen, wenn die benannte Ansicht in der Vorlage existiert accounts/accounts.tpl.html. Das ist in der Tat wahr.

Aber das ist nicht was ich will. Ich möchte die accounts.detail Sachen in der übergeordneten main Ansicht rendern; Ich möchte die html von accounts/detail.tpl.html bis ersetzen die html accounts/accounts.tpl.html in index.html: <div class="container" ui-view="main"></div> gefunden.

Also wie konnte ich das erreichen?

MEINE LÖSUNG IN ZUSAMMENHANG Der Trick ist, wie die Antwort sagt, das URL-Schema einzurichten, um festzustellen, welche Kind Zustand ist „default“. Die Art, wie ich diesen Code in einfachem Englisch interpretiere ist, dass die Elternklasse abstrakt ist mit der richtigen URL und die "Standard" Kindklasse hat die "gleiche" URL (angezeigt durch '').

Wenn Sie weitere Klarheit benötigen, einfach einen Kommentar und ich werde weitere Anleitung 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' } 
    });

Quelle

2014-02-24 Honus Wagner

ein ähnliches Problem zu haben, damit ich durch diese denke, haben Sie am Ende alle Ihre vorherigen Code aus dem Konten Controller und Vorlage in die neuen Konten Listendateien setzen? –

@ aron.duby Ehrlich gesagt, es ist eine Weile her ... Ich musste nicht die Konten in diesem Fall auflisten, aber von dem, woran ich mich erinnern kann, nein. Wenn Sie die Antwort von Matt Way sehen, habe ich seinen modifizierten Code als Anleitung verwendet. Der Kontencontroller enthält also die gesamte darin enthaltene hierarchische Logik. Das Modell selbst enthält nichts. Es verweist nur auf die Listen- und Detailmodelle. –

Ehrfürchtige Frage, ehrfürchtige Antwort, Dank –

Klingt so, als ob Sie nicht möchten, dass die Ansichten hierarchisch sind. Ändern Sie dazu einfach den Namen des zweiten Status in detail.

Beachten Sie jedoch, dass dabei alle hierarchischen Eigenschaften des Statusbaums verloren gehen (z. B. der Controller-Code-Status von Konten).

Wenn Sie die Controller hierarchisch halten möchten, aber eine Ersetzung des HTML durchführen, würde ich ein anderes Elternteil über beiden anderen erstellen, das sich um die Steuerungslogik kümmert, aber nur eine extrem einfache Ansicht hat <div ui-view=""></div>.

Zum Beispiel:

$stateProvider 
    .state('app', { url: '', abstract: true, template: 'parent.html', controller: 'ParentCtrl' }) 
    .state('app.accounts', { url: '/accounts', templateUrl: 'accounts.tpl.html', controller: 'AccountsCtrl' }) 
    .state('app.detail', { url: '/accounts/:id', templateUrl: 'detail.tpl.html', controller: 'AccountDetailCtrl' });

Quelle

2014-02-24 12:50:54

Perfect! Eine kleine Anpassung des Codes, aber ich nahm den Weg der Aufrechterhaltung einer hierarchischen Struktur (nach Ihrem Code-Beispiel) und jetzt ist es einfach perfekt. –

@HonusWagner Könnten Sie mitteilen, wie Sie Ihren ersten Code mit Matts Antwort gemischt haben? Ich treffe genau das gleiche Problem im Moment :) – Thomas

@Thomas wie gewünscht. –

Sie können mit ‚@‘ einen absoluten Pfad zu der ui-Ansicht Ihrer Wahl definieren. Zum Beispiel: "detail @ contacts": {}, wobei dies absolut auf die Detailansicht im Status "Kontakte" abzielt. innerhalb contacts.html

Quelle: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Quelle

2015-07-25 17:13:21

Ahh, genau das, was ich wollte ... – Cody

mit dieser, navigiert zurück zum übergeordneten Status lädt den übergeordneten Controller und anzuzeigen – Ladmerc

Angular UI-Router: Kind mit übergeordneter Ansicht

Antwort

Verwandte Themen