2015-06-15 8 views
1

Вот пример, чтобы проверить http://embed.plnkr.co/uVMlkk/previewУгловой ui.router. Глубокие вложенные маршруты

Когда мы перемещаемся к «стр.2» маршруту есть «эй, я подмаршрут» примечание. Но как только мы перейдем в другое место, эта заметка исчезнет навсегда.

Цель состоит в том, чтобы сразу отобразить некоторые вложенные состояния (по умолчанию).

Я предполагаю, что в случае использования $ state.go() должно быть несколько случаев, но до сих пор это невозможно понять. Любая помощь высоко ценится.

Государственное определение сниппет:

.state('root.page2.tab', { 
    url: '/:tabId', 
    templateUrl: 'tpl.page2.tab.html', 
    controller: 'Page2TabController' 
    }) 

    .state('root.page2.tab.subroute', { 
    url: '', 
    templateUrl: 'tpl.page2.tab.subroute.html' 
    }) 

содержание 'tpl.page2.tab.subroute.html' :

hey, I'm a subroute 

родственный контроллер:

.controller('Page2TabController', ['$scope', '$state', function($scope, $state) { 
    $scope.tabId = $state.params.tabId; 
    $state.go('root.page2.tab.subroute'); 
    }]) 

ответ

1

Существует трюк, как обрабатывать сценарии:

Родитель должен вызывать какие-то действия в случае,

  • это или
  • его еще раз, при навигации назад от ребенка в родительском состоянии

В этом случае мы можем использовать «мишень (ui-view) для ребенка» как место, где сидит специальный view с особым controller , Это будет

  • впрыскивается в такое положение, как только родитель создаются и
  • снова повторно вводил в такое положение, когда ребенок остается. В этом случае он будет перезапущен.

Достаточное объяснение. Существует a working plunker.Существует скорректированный состояние:

.state('root.page2', { 
    url: '/page2', 
    views: { 
     '[email protected]': { 
     templateUrl: './tpl.page2.html', 
     controller: 'Page2Controller' 
     }, 
     '@root.page2': { 
     template: '<div></div>', 
     controller: 'RedirectorController' 
     } 
    } 
}) 

Итак, теперь мы можем сделать некоторые магии внутри нашего 'RedirectorController'

.controller('RedirectorController', ['$scope', '$state', 
    function($scope, $state) { 
     $state.go('root.page2.tab', { tabId: $scope.activeTabId }); 
}]) 

Проверьте это в action here

Узнайте больше о том, что новый вид/контроллер получить от другого (Наследование наследования по виду только по виджетам) один здесь

+0

Не совсем понял, почему эта магия работает, но это так! Имейте это в виду. Спасибо, Радим. –

+0

Если это так или иначе помогло ...;) отлично. На самом деле;) Здесь я попытался объяснить, что магия подробно http://stackoverflow.com/a/29115009/1679310 ... может быть, это может помочь, что это трюк ... используя встроенные функции ... и, к сожалению, НЕТ магия;) –

2

Существует fixed version.

Я удалил URL из 'root.page2.tab.subroute'

.state('root.page2.tab.subroute', { 
    //url: '', 
    templateUrl: 'tpl.page2.tab.subroute.html' 
}) 

И потому, что родитель определил В параметре tabId:

.state('root.page2.tab', { 
    url: '/:tabId', 
    templateUrl: 'tpl.page2.tab.html', 
    controller: 'Page2TabController' 
}) 

Мы должны пройти эти параметры внутри redicrection:

.controller('Page2TabController', ['$scope', '$state', function($scope, $state) { 
    $scope.tabId = $state.params.tabId; 
    // instead of this 
    // $state.go('root.page2.tab.subroute'); 
    // we need this 
    $state.go('root.page2.tab.subroute', $state.params); 
}]) 

Проверьте рабочую фиксированную версию here

Другой подход - использование redirectTo - есть a working plunker

Один из способов, вдохновленный этим:

Redirect a state to default substate with UI-Router in AngularJS

мог бы добавить очень умный, но небольшой редирект фрагмент кода:

.run(['$rootScope', '$state', function($rootScope, $state) { 
    $rootScope.$on('$stateChangeStart', function(evt, to, params) { 
     if (to.redirectTo) { 
     evt.preventDefault(); 
     $state.go(to.redirectTo, params) 
     } 
    }); 
}]) 

И регулировать наше государство, как это:

.state('root.page2.tab', { 
    url: '/:tabId', 
    templateUrl: 'tpl.page2.tab.html', 
    controller: 'Page2TabController', 
    redirectTo: 'root.page2.tab.subroute', 
}) 

Проверить это here

+0

Спасибо, Radim, для Вас время. Мы почти там, но еще не совсем. В вашем примере есть случай, когда я перехожу к «page2», затем «tabId1/2/3», затем «page2». - «root.page2.tab» и «root.page2.tab.subroute» больше не активируются. Хотя он отлично работает, когда мы снова набираем «page1» и «page2». (Тот же случай для обоих подходов). Есть предположения? –

+0

Дело в том, что переход от вкладок 1/2/3 назад к странице2 ... не перезапускает «Page2Controller». Это их родитель, поэтому, возвращаясь от ребенка ... родитель все еще там ... не перезапускает. Это на самом деле хорошо. Вам действительно нужно перейти к некоторому ребенку после выбора этого родителя? например на вкладку 2? Просто спрашивайте ... не могли бы вы подтвердить, что это обязательно для вас? –

+0

1 минута пожалуйста ... я объясню –

Смежные вопросы