использование вкладок в приложении ui-router без состояний для каждой вкладки

В настоящее время я разрабатываю угловой appp с ui-router и хочу использовать вкладки в одном представлении. Как типичная реализация вкладок включает использование относительных ссылок (#tabId), это конфликтует с изменением состояния маршрутизатора пользовательского интерфейса.
Есть ли способ реализовать вкладки без создания состояния для каждой вкладки?

Заранее спасибо.

2 ответа

  1. Если требуется изменить url-адрес, попробуйте использовать строку запроса

    state('app.sample', {
      url: '/sample?tab',
      params: {
        tab: {value: null, squash: true} // for make param optional
      }
    }
    

    или как это

    state('app.sample', {
        url: '/sample/:tab',
        params: {
          tab: {value: null, squash: true}
        }
    }
    

    а в controller вы можете работать с $stateParams

    $scope.currentTab = $stateParams.tab || 'defaultTab';
    
  2. Наконец, я использовал плагин Tab-collapse bootstrap ( https://github.com/flatlogic/bootstrap-tabcollapse ).

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