Angular Ui-Router geschachtelte Zustände ohne verschachtelte Ansichten

Question

Lassen Sie uns sagen, ich habe eine Filme App. Es hat Home/About/Filme Seiten. Filme Seite hat Unterkategorien: Komödie/Drama. Derzeit habe ich Probleme mit der Navigation. Das Ziel ist, wenn ich auf Home klicke - es sollte nach Hause rendern. About - ungefähr. Films - render alle Filme (zum Beispiel einfache Karten mit Titel/Genre/Jahr). Wenn ich auf Films->Comedy klicke - es sollte den gleichen Controller wie Films verwenden, exakt die gleiche Vorlage, aber nur Komödien machen. Außerdem sollte die Navigation mit Films und Comedy aktiv sein.

Ich habe Plunker erstellt https://plnkr.co/edit/d0Db18ZJYtQx6aJEZ3xa?p=preview Also mein erster Ansatz ersten Ansatz zu zeigen, war:

.state('layout.films', { 
    url: '/films', 
    controller: 'FilmsCtrl as films', 
    template: '<div>All films</div>' 
}) 
.state('layout.films.genre', { 
    url: '/:genre', 
    controller: 'FilmsCtrl as films', 
    template: '<div>{{ films.genre }} films</div>' 
}) 

und das Layout:

<div class="layout"> 
    <ul> 
    <li><a ui-sref-active="_active" ui-sref="layout.home">home</a></li> 
    <li><a ui-sref-active="_active" ui-sref="layout.about">about</a></li> 
    <li> 
     <a ui-sref-active="_active" ui-sref="layout.films">films</a> 
     <ul> 
     <li><a ui-sref-active="_active" ui-sref="layout.films.genre({genre: 'comedy'})">comedy</a></li> 
     <li><a ui-sref-active="_active" ui-sref="layout.films.genre({genre: 'drama'})">drama</a></li> 
     </ul> 
    </li> 
    </ul> 
    <hr> 
    <div ui-view></div> 
</div> 

Aber das nicht funktioniert. Es stellt sich heraus, dass verschachtelte Zustände verschachtelte Ansichten erfordern. Ich war traurig. Und zweite Ansatz versucht: https://plnkr.co/edit/3YWAoLcPU3fd2FdebWpD?p=preview

Ich habe nur eine Filme Zustand:

.state('layout.films-genre', { 
    url: '/films/:genre?', 
    controller: 'FilmsCtrl as films', 
    template: '<div>{{ films.genre }} films</div>' 
}) 

und festes Layout mit diesen arbeiten:

<a ui-sref-active="_active" ui-sref="layout.films-genre">films</a> 
    <ul> 
    <li><a ui-sref-active="_active" ui-sref="layout.films-genre({genre: 'comedy'})">comedy</a></li> 
    <li><a ui-sref-active="_active" ui-sref="layout.films-genre({genre: 'drama'})">drama</a></li> 
    </ul> 

Scheint zu funktionieren. Es hebt sogar Menüpunkte richtig hervor (wow). Aber eigentlich ... Ich kann den Zustand von films->comedy zu films nicht ändern. Nächster Gedanke war die Verbindung zu dem allen Filmen zu ändern:

<a ui-sref-active="_active" ui-sref="layout.films-genre({genre: ''})">films</a> 

Aber jetzt ist es nicht Wurzel Menüpunkt (Filme) markiert, wenn ich einen des Genres klicken. Was soll ich tun, um das gewünschte Verhalten zu implementieren?

Answer 1

Wenn ich Ihre Frage richtig verstanden habe, möchten Sie eine Seite haben, die ein bestimmtes Genre von Filmen wiedergeben kann?

Wenn ja, sollten Sie StateParams nachschlagen. Auf diese Weise können Sie ein Menü erstellen, das alle auf die gleiche untergeordnete Ansicht verweist, jedoch unterschiedliche Parameter sendet. Sortieren Sie dann die Liste der Filme entsprechend den gesendeten Parametern.

Es würde wie folgt aussehen:

.state('layout.films-genre', { 
    url: '/films', 
    controller: 'FilmsCtrl as films', 
    template: '<div> Template goes here </div>' 
    params: { genre: 'all' } // as default if I remember correctly 
}) 

Sie aswell die Antwort auf Ihre Frage hier nicht finden könnte: How to pass parameters using ui-sref in ui-router to controller