persist Geschwister ui-Ansichten bei Zustandsänderung - UI-Router

Question

Diese Frage bezieht sich auf "How can I persist sibling ui-views when changing state" (plunker).

Ich versuche eine Ansicht (Inhalt) unverändert zu lassen, wenn ich den Status in der Hauptnavigation ändere (mainNav).

Der Inhalt sollte nur durch die Subnavigation festgelegt werden und bleibt beim Ändern der Hauptnavigation erhalten.

Gibt es eine Möglichkeit, eine Ansicht in ui-Router zu bleiben, auch wenn der Zustand verlassen wird?

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

}); 

fand ich Persist state when changing to another state, aber es das Problem nicht vollständig lösen. Der Zustand ist beständig, aber es wird nicht in Betracht gezogen, eine konsistente Ansicht beizubehalten, wenn in einen anderen Zustand navigiert wird.

Answer 1

Ja, es ist und es ist ziemlich einfach, aber es hat seine Begrenzung: Speichern Sie die Daten, die Sie im Bereich der Eltern benötigen.

$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'; 

// in anderen Kind Controller $ scope.context.toto = 'Wuff';

Hinweis: Ich weiß nicht, ob dies funktioniert, wenn Sie controllerAs Syntax verwenden.

Ich benutze es persönlich für ein mehrseitiges Formular mit Next/Back-Tasten drin.

Answer 2

Walfrats Antwort scheint korrekt zu sein. Ich versuche nur etwas auszuarbeiten und verstehe vielleicht, wonach du suchst. Hier ist, was ich denke, Sie fragen nach:

// 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'); 
... 

In diesem Beispiel können Sie die Standardansicht einstellen, indem abstract: true im nav Zustand (Anmerkung: Ich habe nie versucht, es drei Zustände tief, aber es funktioniert mit zwei Zuständen). Dies kann Ihnen den gewünschten Effekt geben.

Wie Unteransichten als Ansichten haben, sollte es möglich sein, aber ich bin mir nicht sicher, ob es empfohlen wird, tief verschachtelte Ansichten wie diese zu haben. Ist das nahe dem, wonach Sie suchen?