ui-routerどのようにして、独自の保存されたルートを持つ2つの異なる状態のネストされたインスタンスを作成できますか？

Question

私は入れ子状態が必要なページを持っていますが、すべてのGoogle検索結果が戻ってきます。私はすでにそれを使用しており、問題はありません。私がそれを説明できる最善の方法は、一連の写真の中にあります。私は上記のウィジェットのいずれかをクリックしたときに、それが現在

に設定されているとしてここで

は私のページですさて、この例では、私は4番目のオプションであるnotesウィジェットをクリックしてくださいと言います。次のページでは何が起こることは、私が起こっている必要があり何、私は完全に新しい状態に遷移myurl.com/call/{{assessorId}}/process/processType?=1からmyurl.com/assessor/{{assessorId}}/detail/notes

に私のURLが変更され今

を出てくるの画面を持っています第二の画像が表示されるが、私はMSの一部のクロッピングとつなぎ合わせ、この絵のように最初の画面の下半分、内側ペイント

画面の下半分には、1つのウィジェットから別のウィジェットに移動する際に、ui-routerが追跡して従わなければならない独自の独立したURLがあります。 {{assessorName}} | Notesと記載されているタイトルバーは、オリジナルのウィジェットセットに戻ってナビゲートできる自家製ブレッドクラムソリューションです。

私はナビゲーションがダウンしていますが、私はその状態のインスタンスを現在の状態の中に保つ方法がありません。代わりに、私はassessor.callの状態を残して、assessor.detail.notesの状態に移行します。

どのように私の代わりに、ページの下部に内側に私のassessor.call状態、および巣私の

assessor.detail.{{selectedWidget}}状態を維持していますか？

Answer 1

あなたは今、あなたは、各UIビュー用に別のビュー、コントローラ、SASS/CSSを持つことができる例

<div class="content"> 
    <div class="header" ui-view="header"></div> 
    <div class="main" ui-view="main"></div> 
    <div class="footer z-depth-3" ui-view="footer"></div> 
</div> 

ため 、単一のHTMLページに複数のUIビューを使用することができます。 レッツは、私はあなたがすでに問題なくネストされたビューを使用していると言う

$stateProvider.state('home.organisation', 
      { 
       url: '^/organisation',     
       views: { 
        'header@home': { 
         templateUrl: 'navbar@organisation.html', 
         controllerAs: 'organisationNavbar', 
         controller: 'OrganisationNavbarCntrl' 
        }, 
        'main@home': { 
         templateUrl: 'organisation.html', 
         controllerAs: 'organisation', 
         controller: 'OrganisationCntrl' 
        }, 
        'footer@home': { 
         templateUrl:'footer@organisation.html', 
         controllerAs: 'organisationFooter', 
         controller: 'OrganisationFooterCntrl' 
        } 
       } 
      });