8

Этот вопрос основан на "How can I persist sibling ui-views when changing state" (plunker).persist sibling ui-views при изменении состояния - ui-router

Я пытаюсь сохранить представление (содержание) без изменений, когда я изменяю состояние в основной навигации (mainNav).

Содержимое должно устанавливаться только суб-навигацией и оставаться при изменении основной навигации.

Есть ли возможность оставаться видом в u-router, даже если состояние осталось?

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

    $urlRouterProvider.otherwise('/'); 

    $stateProvider 
    .state('index', { 
     url: '/', 
     views: { 
     '@': { 
     templateUrl: 'layout.html' 
     }, 
     '[email protected]': { 
     template: '<a ui-sref="Main3">Main3 - with sub</a><br />' 
       + '<a ui-sref="Main4">Main4 - with sub</a>' 
     }, 
     '[email protected]' : { 
     template: '<p>This is the sub navigation</p>' 
     }, 
     '[email protected]': { 
     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: { '[email protected]': { template: 'Content of Main3.Sub1' } } 
    }) 
    .state('Main3.Sub2', { 
    url: '/Sub2', 
    views: { '[email protected]': { template: 'Content of Main3.Sub2' } } 
    }) 
    .state('Main4.Sub1', { 
    url: '/Sub1', 
    views: { '[email protected]': { template: 'Content of Main4.Sub1' } } 
    }) 
    .state('Main4.Sub2', { 
    url: '/Sub2', 
    views: { '[email protected]': { template: 'Content of Main4.Sub2' } } 
    }) 

}); 

Я нашел Persist state when changing to another state, но это не решает проблему полностью. Состояние является постоянным, но нет никакого рассмотрения остаточного представления, согласованного при переходе в другое состояние.

ответ

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.

Я лично использую его для многостраничной формы со следующими/обратными кнопками.

+0

Редактировать, кажется, заблокировано ... Я забыл одно: ограничение: этот способ означает, что родитель немного привязан к своему ребенку, так как он предоставил некоторые поля, а ребенок должен знать друг друга, чтобы не иметь любой конфликт. Хороший способ разрешить это будет для каждого ребенка, чтобы сохранить свое состояние в $ scope.context. [Имя состояния ребенка]. – Walfrat

1

Ответ Валфрата кажется правильным. Я просто пытаюсь разработать и, возможно, понять, что вы ищете. Вот что я думаю, что вы просите:

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

В этом примере, вы можете установить вид по умолчанию, в том числе abstract: true в состоянии нав (примечание: Я никогда не пробовал три состояния глубоко, но это работает с двумя состояниями). Это может дать вам эффект, который вы ищете.

Что касается субавигаций как видов, это должно быть возможно, но я не уверен, что рекомендуется иметь такие глубокие вложенные представления. Это близко к тому, что вы ищете?

+0

аннотация просто делает невозможным переход к этому, у этого есть некоторая утилита, но на самом деле не имеет ничего общего с тем, что задает ОП. – Walfrat

+0

Точно. Устанавливая свойство abstract, вы можете иметь представление на родительском баре на вашей странице. Он будет там, когда вы посетите любой из детских просмотров. Я не уверен, почему это не имеет значения. Я использую этот метод в проекте, над которым я сейчас работаю. – Onyooo

+0

просто сказал, что это не имеет никакого отношения к тому, что спросил ОП. – Walfrat