UIルータは - どのように私は、ネストされた状態

Question

を作成するのです私は次のような状態があります。

.state('main', {url: '/main', templateUrl: 'views/main.html', controller: 'Main'}) 

私は何をしたい/main/detailsある別のURLを持っています。これはviews/main.htmlのdivになりますが、このURLに表示されるのは私だけです。次に、それらを/ mainに戻すリンクをクリックすることはできますが、上記divを非表示にして他のdivを表示します。これはどうやってできますか？

Answer 1

これを行う方法はいくつかあります。

メインテンプレートで共通のものを共有する必要がない場合は、2つの状態（ネストされていない状態）を使用してURL mainとmain/detailにマッピングしてください。州名にドットが含まれていない限り、ネスティングはありません。

メインと共通のテンプレートを詳細状態で共有する場合は、ネストを使用できます。非常に簡単な方法は、別のui-viewディレクティブと2つのネストされた（子）状態emptyとwithを含むプレースホルダdivを持つ（抽象的な）メインステートを持つことです。これらの子ステートは、メインテンプレートにレンダリングするテンプレートを提供できます。したがって、emptyの場合、テンプレートは空にすることができます（空の文字列ではなく、何かでなければなりません）。

angular 
    .module('main') 
    .config(function ($stateProvider) { 
    $stateProvider 
     .state('main', { 
     url: '/main', 
     abstract: true, 
     template: '<div>some stuff possibly here: <div ui-view></div></div>' 
     }) 
     .state('main.empty', { 
     url: '', 
     template: ' ' // cannot be empty string 
     }) 
     .state('main.detail', { 
     url: '/detail', 
     template: '<div>the details</div>' 
     }); 
    }); 

あなたのリンクは、その後、URLがちょうど/mainになる場合でも、状態名としてmain.emptyを対象としなければならないことに注意してください。

3番目のオプションは、ui-viewという名前を使用し、複数のビューにstuffを割り当ててコンテンツを制御することもできます。しかし、これは非常に扱いにくいものになることがあります。それは、それぞれの状態ごとにui-viewという名前の最初のものを参照する必要があります。また、あなたが言及したネストされたコンテンツもサポートしていません。