状態-ui-routerを変更すると、兄弟ui-viewsが表示される

Question

この質問は"How can I persist sibling ui-views when changing state"（plunker）に基づいています。

メインナビゲーション（mainNav）で状態を変更すると、ビュー（コンテンツ）を変更しないようにしています。

コンテンツはサブナビゲーションでのみ設定し、メインナビゲーションを変更するときは残ります。

状態が残っていても、ui-routerに表示されたままになる可能性はありますか？

angular.module('MyApp', [ 
    'ui.router' 
]) 
    .config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/'); 

    $stateProvider 
    .state('index', { 
     url: '/', 
     views: { 
     '@': { 
     templateUrl: 'layout.html' 
     }, 
     'mainNav@index': { 
     template: '<a ui-sref="Main3">Main3 - with sub</a><br />' 
       + '<a ui-sref="Main4">Main4 - with sub</a>' 
     }, 
     'subNav@index' : { 
     template: '<p>This is the sub navigation</p>' 
     }, 
     'content@index': { 
     template: '<p>Content shared for MAINs</p>' 
     } 
    } 
    }) 
    .state('Main3', { 
    parent: 'index', 
    url: '/Main3', 
    views: { 
     /*'mainNav': { 

     },*/ 
     'subNav': { 
     template: '<a ui-sref="Main3.Sub1">Main3.Sub1</a><br />' 
     + '<a ui-sref="Main3.Sub2">Main3.Sub2</a>' 
     } 
    } 
    }) 
    .state('Main4', { 
    parent: 'index', 
    url: '/Main4', 
    views: { 
     'subNav': { 
     template: '<a ui-sref="Main4.Sub1">Main4.Sub1</a><br />' 
     + '<a ui-sref="Main4.Sub2">Main4.Sub2</a>' 
     } 
    } 
    }) 

    .state('Main3.Sub1', { 
    url: '/Sub1', 
    views: { 'content@index': { template: 'Content of Main3.Sub1' } } 
    }) 
    .state('Main3.Sub2', { 
    url: '/Sub2', 
    views: { 'content@index': { template: 'Content of Main3.Sub2' } } 
    }) 
    .state('Main4.Sub1', { 
    url: '/Sub1', 
    views: { 'content@index': { template: 'Content of Main4.Sub1' } } 
    }) 
    .state('Main4.Sub2', { 
    url: '/Sub2', 
    views: { 'content@index': { template: 'Content of Main4.Sub2' } } 
    }) 

}); 

私はPersist state when changing to another stateを見つけましたが、問題は完全に解決されません。状態は永続的ですが、別の状態にナビゲートすると一貫したビューが残ることは考慮されていません。

Answer 1

はい、それは非常に簡単ですが、制限があります。必要なデータを親のスコープに保存します。

$state.state('parent', { 
    controller:'ParentController' 
}); 

$state.state('parent.child1', { 
    controller:'ChildController' 
}); 

$state.state('parent.child2', { 
    controller:'ChildController2' 
}); 
// in Parent controller 
$scope.context = {};// it important to create a intermediary field that will store the data, otherwise you might have a problem with scopes inheritance 

// in Child controller 
$scope.context.toto = 'titi'; 

//他の子のコントローラで $ scope.context.toto = '横糸';

注：controllerAs構文を使用するとこれが動作するかどうかはわかりません。

私は個人的に、次の/戻るボタンが付いたマルチページフォームに使用します。

Answer 2

ウォルファットの答えは正しいようです。私はちょうど精巧にしようとしているし、あなたが探しているものを理解しているかもしれない。ここでは、私はあなたが求めていると思うものです：私は三つの状態の深いそれを試したことがありませんが、それは動作します：

// app.js 
... 
$stateProvider 
    .state('nav', { 
    url: '/', 
    templateUrl: 'app/templates/nav.html', 
    controller: 'NavCtrl as nav', 
    abstract: true 
    }) 
    .state('nav.subNav', { 
    url: 'subNav/', 
    templateUrl: 'app/templates/subNav.html', 
    controller: 'subNavCtrl as subNav', 
    abstract: true 
    }) 
    .state('nav.subNav.index', { 
    url: 'index', 
    templateUrl: 'app/templates/index.html', 
    controller: 'IndexCtrl as index' 
    }); 
$urlRouterProvider.otherwise('/subNav/index'); 
... 

この例では、注意してください（NAV状態でabstract: true含めることにより、デフォルトのビューを設定することができます2つの状態）。これはあなたが探している効果を与えるかもしれません。

サブナビゲーションをビューとして持つことは可能ですが、そのような深いネストされたビューをお勧めするかどうかはわかりません。これはあなたが探しているものに近いですか？