Я все еще работаю над угловым приложением, используя отличный ui-router
. Я хотел бы использовать некоторые динамические вложенные состояния (я говорил об этом здесь), поэтому я знаю, что это возможно.
Вот мой код, со специфическим состоянием и его динамическими дочерними состояниями:
.state('home', {
url: '/home',
controller: 'RouteCtrl'
})
.state('home.state', {
url: '/home/:state',
controller: 'RouteCtrl'
})
$urlRouterProvider.otherwise('/home')
У меня есть 3 кнопки (более конкретно, я использую <a>
чтобы сделать это), чтобы получить доступ к 3 различным состояниям: "домашний", "контакт" и "около". "контакт" и "около" - это "домашние" вложенные состояния, и каждое состояние имеет конкретный текст для отображения при активации.
К несчастью, похоже, что оба состояния детей не разрешены из "домашнего" состояния.
Вот плукер проблемы, которая соответствует моей проблеме. Есть идеи?
Технически дом, контакт и около не 3 состояния. То, что вы делаете, это изменение содержимого на основе параметров состояния. Это может быть достигнуто с использованием одного состояния и принуждения ui-router к перезагрузке состояния при использовании $ state.go
Я изменил ваш plunkr здесь http://plnkr.co/edit/XXaltjG17FwY15tSbKaD?p=preview
Ваше определение состояния может выглядеть примерно так:
.state('home', {
url: '/home?state',
controller: 'RouteCtrl'
})
Значок вопроса делает параметр состояния необязательным, а также строку запроса.
Перенаправление может выглядеть примерно так. Вам нужно перезагрузить, когда вы идете на тот же маршрут
$state.go('home', {state: state}, {reload: true});
Перенаправление на домашнюю страницу может выглядеть примерно так. Вам необходимо отключить наследование для этого перенаправления, так как вы не хотите сохранять строки запроса.
$state.go('home',{}, {reload: true, inherit: false});
Это даст вам рабочий вызов новым состояниям:
$scope.redirect = function(state) {
console.log('redirect to state : ' + state);
if (state != 'home') {
$state.go('home.state', {
'state': state
});
} else {
$state.go('home');
}
}
Тем не менее, он все равно не изменит текст на странице, потому что контроллер устанавливает его только один раз при первоначальной загрузке.
Основная проблема здесь заключается в том, что вы хотите иметь переменную в состоянии. Вы не можете пойти заявить home.about
, так как не данной .state
.
Вы должны посмотреть на stateParams
или указать URL-адрес, по которому вы хотите перейти к URL-адресу с помощью Angular $location
.
Примечание. Я думаю, что URL-адрес дочернего состояния, такого как home.state
, не нуждается в /home
URL-адресе, поскольку он находится в состоянии отца.