Перенаправить состояние в стандартное соединение с UI-маршрутизатором в AngularJS

Я создаю вкладку на основе страницы, которая показывает некоторые данные. Я использую UI-Router в AngularJs для регистрации состояний.

Моя цель - открыть одну вкладку по умолчанию при загрузке страницы. Каждая вкладка имеет вложенные вкладки, и я бы хотел, чтобы при смене вкладок была открыта вложенная вкладка по умолчанию.

Я тестировал с onEnter функции onEnter а внутри я использую $state.go('mainstate.substate'); но, похоже, он не работает из-за проблем с эффектом цикла (при state.go для его подстановки он вызывает родительское состояние и т.д., и он превращается в цикл).

$stateProvider

.state('main', {
  url: '/main',
  templateUrl: 'main.html',
  onEnter: function($state) {
    $state.go('main.street');
  }
})

.state('main.street', {
  url: '/street',
  templateUrl: 'submenu.html',
  params: {tabName: 'street'}
})

Здесь я создал демо-версию плунжера.

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

Спасибо за ваши предложения, мнения и идеи.

Ответ 1

Обновление: 1.0 и далее Поддерживает redirectTo из коробки.

https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto

Я создал пример здесь.

Это решение происходит из приятного "комментария" к проблеме с перенаправлением с использованием .when() (fooobar.com/questions/78586/...) и действительно классного решения для него (Крис Т, но оригинальный пост был от yahyaKacem)

https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

Итак, сначала давайте расширим main с настройкой перенаправления:

$stateProvider
    .state('main', {
      url: '/main',
      templateUrl: 'main.html',
      redirectTo: 'main.street',
    })

И добавить только эти несколько строк в бег

app.run(['$rootScope', '$state', function($rootScope, $state) {

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

Таким образом, мы можем настроить любое из наших состояний с помощью перенаправления по умолчанию... Проверьте это здесь

РЕДАКТИРОВАТЬ: Добавлена опция из комментария @Alec, чтобы сохранить историю браузера.

Ответ 2

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

Итак, я нашел другое решение, которое делает то же самое, но также запоминает каждое содержимое субтета.

Мне нужно всего лишь установить ui-router-extras и использовать функция перенаправления с глубоким состоянием:

$stateProvider
  .state('main.street', {
     url: '/main/street',
     templateUrl: 'main.html',
     deepStateRedirect: { default: { state: 'main.street.cloud' } },
  });

Спасибо!

Ответ 3

Начиная с версия 1.0 ui-router, он поддерживает свойство redirectTo. Например:

.state('A', {
  redirectTo: 'A.B'
})

Ответ 4

Начиная с версии 1.0 ui-router, по умолчанию используется метод IHookRegistry.onBefore(), как показано в примере Data Driven Default Substate в http://angular-ui.github.io/ui-router/feature-1.0/interfaces/transition.ihookregistry.html#onbefore

// state declaration
{
  name: 'home',
  template: '<div ui-view/>',
  defaultSubstate: 'home.dashboard'
}

var criteria = {
  to: function(state) {
    return state.defaultSubstate != null;
  }
}
$transitions.onBefore(criteria, function($transition$, $state) {
  return $state.target($transition$.to().defaultSubstate);
});

Ответ 5

app.config(function($stateProvider,$urlRouterProvider){

    $urlRouterProvider.when("/state","/state/sub-state");

    })

Ответ 6

Если кто-то приходит сюда за ответом относительно того, как реализовать простое перенаправление для состояния, и, как это случилось со мной, не имеет возможности использовать новый маршрутизатор...

Очевидно, если можно, ответ @bblackwo великолепен:

$stateProvider.state('A', {
  redirectTo: 'B',
});

Если вы не можете, просто перенаправьте его вручную:

$stateProvider.state('A', {
  controller: $state => {
    $state.go('B');
  },
});

Я надеюсь, что это помогает!