ui-templateurlとcontrollersネストされた抽象状態にネストされたビューを設定するルーター

Question

私は実験してきました ui-router そして、私はちょっとした癖に遭遇しました。私は抽象的な状態の下にビューを設定することができません。状態がアクティブである間は、ビューが見つからないようです

ここに例があります :

州のプロバイダー :

$stateProvider
.state('search', {
    abstract: true,
    url: '',
    views: {
        '@': { 
            templateUrl: 'app/views/layout.html',
        },
        'full-page@search': {
            templateUrl : 'app/views/search/search.html',
        }
    }
})

//------------------------------------------------------------
// Search list view
//------------------------------------------------------------
.state('search.list', {
    url: '/search/users',
    views: {
        'content-container@search' : {
            templateUrl : 'app/views/search/user.list.html',
            controller  : 'SearchResults',
        }
    }
})

//------------------------------------------------------------
// Search view of one users's details
//------------------------------------------------------------
.state('search.user', {
    abstract : true,
    url: '/search/usr/{userId}',
    views: {
        'content-container@search' : {
            templateUrl: 'app/views/user/user.detail.html',
            controller : 'UserController', 
        },
    }
})

//------------------------------------------------------------
// View of the user's details
//------------------------------------------------------------
.state('search.user.view', {
    url : '',
    views: {
        'left-column@search' : { 
            templateUrl : 'app/views/user/user.detail.view.html',
            controller  : 'UserEditController',
        }
    }
})`

HTML:

インデックス。html :

<div> <div ui-view></div> </div>

レイアウト。html :

<div> <div ui-view='full-page'></div> </div>

検索。html :

<div> <div ui-view='content-container'></div> </div>

ユーザー。リスト。html :

<div> <ul> <li ng-repeat="user in users"> <a ui-sref='search.user.view({userId : user.userId})'></a> </li> </ul> </div>

ユーザー。詳細。html :

<div> <div ng-view="left-column"></div> <div ng-view='right-column'></div>
</div>

ユーザー。詳細。ビュー。html :

<div> User information </div>

私が取得しようとしているページの状態の流れは次のとおりです :

1）検索の最初のサイトの読み込み。リスト(どのバブルアップまで)

• 1.a:負荷 layout.html デフォルトのuiビューに インデックス。html '@'ビュー'を介して
• 1.b: search.html レイアウトの「全ページ」ビューを介してロードされます。html、その後
• 1.c: user.list.html を介してロードされます content-container@search 検索で表示します。リスト状態。これは正常に動作し、ダンディです

2）で作成されたリストをクリックする user.list.html 検索をロードします。ユーザー。どちらを表示する必要がありますか？検索に戻るバブル。ユーザー,

• 2.負荷 ユーザー。詳細。html の中で content-container@search 検索のビュー。html、その後（これは動作します）
• 2.bの負荷 ユーザー。詳細。ビュー。html の中で ui-view='left-column' ユーザーのdiv。詳細。html。（これは機能せず、「左列」ビューは空のままです。)

私はもともと、このコードが抽象状態のuiビューの人口と同じパターンを2回実行すると考えていました（ユーザーに対して1回）。リスト、ユーザーのための他。詳細。ビュー）しかし、これはそうではないようです。それはまるでのように思えます "left-column" ビューは、コンテンツコンテナが入力される前に検索されます

私はui-routerが初めてなので、抽象的な状態がどのように移入されるか、または抽象的な状態の意図された使用の順序について誤解している可能性が

Answer 1

あなたはほとんどそこにいます-ここにあります 働くプランカー.私が行った変更

ユーザー。詳細。html

ではなく、 ng-ビュー しかし、 ui-view

<div> 
   //<div ng-view="left-column"></div> 
   //<div ng-view='right-column'></div>
   <div ui-view="left-column"></div> 
   <div ui-view='right-column'></div>
</div>

状態'検索。ユーザー。ビュー'

後の部分 @ delimiterはaの名前でなければなりません 州 そのui-viewを保持する-そうではありません 検索 しかし、 search.user.私が示すように right-column 以下-これが実際に親である場合。..私たちはそれをスキップすることができます （舞台裏で私たちのために行われます）

.state('search.user.view', {
    url : '',
    views: {
        // 'left-column@search' : { 
        'left-column@search.user' : { 
           ...
        },
        'right-column@' : { 
           ...
        }
    }

実際の例を確認してください ここに