Дочернее состояние с UI-роутером не разрешено

0

Я все еще работаю над угловым приложением, используя отличный ui-router. Я хотел бы использовать некоторые динамические вложенные состояния (я говорил об этом здесь), поэтому я знаю, что это возможно.

Вот мой код, со специфическим состоянием и его динамическими дочерними состояниями:

    .state('home', {

       url: '/home',
       controller: 'RouteCtrl'
    })

    .state('home.state', {

       url: '/home/:state',
       controller: 'RouteCtrl'
     })

     $urlRouterProvider.otherwise('/home')

У меня есть 3 кнопки (более конкретно, я использую <a> чтобы сделать это), чтобы получить доступ к 3 различным состояниям: "домашний", "контакт" и "около". "контакт" и "около" - это "домашние" вложенные состояния, и каждое состояние имеет конкретный текст для отображения при активации.

К несчастью, похоже, что оба состояния детей не разрешены из "домашнего" состояния.

Вот плукер проблемы, которая соответствует моей проблеме. Есть идеи?

Теги:
angular-ui-router

3 ответа

0
Лучший ответ

Технически дом, контакт и около не 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});
  • 0
    Большое спасибо :)
1

Это даст вам рабочий вызов новым состояниям:

$scope.redirect = function(state) {
    console.log('redirect to state : ' + state);

    if (state != 'home') {
      $state.go('home.state', {
        'state': state
      });
    } else {
      $state.go('home');
    }
  }

Тем не менее, он все равно не изменит текст на странице, потому что контроллер устанавливает его только один раз при первоначальной загрузке.

0

Основная проблема здесь заключается в том, что вы хотите иметь переменную в состоянии. Вы не можете пойти заявить home.about, так как не данной .state.

Вы должны посмотреть на stateParams или указать URL-адрес, по которому вы хотите перейти к URL-адресу с помощью Angular $location.

Примечание. Я думаю, что URL-адрес дочернего состояния, такого как home.state, не нуждается в /home URL-адресе, поскольку он находится в состоянии отца.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню