ネストされたビューのない角度ui-routerネスト状態

Question

映画アプリがあるとします。ホーム/ About/Filmsのページがあります。映画のページには、コメディ/ドラマのサブカテゴリがあります。現在、私はナビゲーションに苦しんでいます。目標は私がHomeをクリックするときです - それは家にレンダリングする必要があります。 About - 約Films - すべての映画を表示します（例えば、タイトル/ジャンル/年のシンプルなカード）。 Films->Comedyをクリックすると、Filmsと同じコントローラを使用して、まったく同じテンプレートが表示されますが、コメディフィルムのみが表示されます。さらに、ナビゲーションはFilmsとComedyで有効にする必要があります。

私は、だから私の最初のアプローチだった最初のアプローチにhttps://plnkr.co/edit/d0Db18ZJYtQx6aJEZ3xa?p=preview を実証するplunkerを作成しました：

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

とこのレイアウト：

<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> 

しかし、それは動作しません。ネストされたビューにはネストされたビューが必要であることが分かります。私は悲しかった。そして、第二のアプローチを試してみました：これで動作するように

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

と固定レイアウト：https://plnkr.co/edit/3YWAoLcPU3fd2FdebWpD?p=preview

は、私が唯一のフィルムの状態を作成し

<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> 

が働いているようです。メニュー項目を適切に強調表示（ワウ）します。しかし、実際には... films->comedyからfilmsに状態を変更することはできません。次の思想は、すべての映画へのリンクを変更しました：

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

をしかし、私はジャンルの一つをクリックすると、今では、ルートメニューアイテム（フィルム）をハイライト表示されません。希望の動作を実装するために何をすべきですか？

Answer 1

あなたの質問が正しく理解されたら、特定のジャンルの映画をレンダリングできるページが必要ですか？

もしそうなら、あなたはstateParamsを調べるべきだと思います。このようにして、すべて同じ子ビューに向けられ、異なるパラメータを送信するメニューを持つことができます。次に、送信されるパラメータに応じてムービーのリストをソートします。

それはこのようなものになります。返信用 How to pass parameters using ui-sref in ui-router to controller