Угловые закладки AngularJS UI, поддерживающие маршрутизацию

Я хотел бы использовать вкладки Bootstrap UML AngularJS в моем проекте, но мне нужно, чтобы он поддерживал маршрутизацию.

Например:

Tab         URL
--------------------
Jobs       /jobs
Invoices   /invoices
Payments   /payments

Насколько я могу судить по исходному коду, текущие директивы tabs и pane не поддерживают маршрутизацию.

Каким будет лучший способ добавить маршрутизацию?

Ответы

Ответ 1

Чтобы добавить маршрутизацию, вы обычно используете директиву ng-view. Я не уверен, что достаточно легко изменить пользовательский интерфейс angular, чтобы поддерживать то, что вы ищете, но здесь plunker, показывающий примерно то, что я думаю, что вы ищете (это не обязательно лучший способ сделать это - надеюсь, кто-то может дать вам лучшее решение или улучшить это)

Ответ 2

Использовать data-target = "# tab1". Работал для меня

Ответ 3

У меня также есть это требование, и я делаю что-то похожее на ответ, предоставленный Крисом, но я также использую AngularUI router, потому что ngRouter не поддерживает вложенные представления, и возможно, у вас будет просмотр содержимого вкладки внутри другого представления (я сделал), и это не будет работать с ng-view.

Ответ 5

Согласитесь с использованием UI-Router, который отслеживает состояния и отлично работает с вложенными представлениями. Говоря конкретно о проблеме с вкладками Bootstrap, существует большая реализация, которая использует UI-маршрутизатор: вкладки UI-Router

Ответ 7

Если у вас есть маршрут с настройками, и вы хотите иметь вкладки на этой странице настроек, то это работает.

<div class="right-side" align="center">
    <div class="settings-body">
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#!/settings#private_email">Private email</a></li>
          <li><a data-toggle="tab" href="#!/settings#signature">Signature</a></li>
          <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
        </ul>

        <div class="tab-content">
          <div id="private_email" class="tab-pane fade in active">
            <div class="row" ng-controller="SettingsController">
                <div>
                   <button class="btn btn-primary" ng-click="activatePrivateEmail()">Activate email</button>
                   <button class="btn btn-danger">Deactivate email</button>
                </div>
            </div>
          </div>
          <div id="signature" class="tab-pane fade">
              <textarea ui-tinymce="tinymceOptions" ng-model="signature"></textarea>
              <div class="send-btn">
                <button name="send" ng-click="" class="btn btn-primary">Save signature</button>
              </div>
          </div>
          <div id="menu2" class="tab-pane fade">
            <h3>Menu 2</h3>
            <p>Some content in menu 2.</p>
          </div>
        </div>
    </div>
</div>

Ответ 8

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

$scope.tabs = [
            { link : '#/furnizori', label : 'Furnizori' },
            { link : '#/total', label : 'Total' },
            { link : '#/clienti', label : 'Clienti' },
            { link : '#/centralizator', label : 'Centralizator' },
            { link : '#/optiuni', label : 'Optiuni' }
        ];

        switch ($location.path()) {
            case '/furnizori':
                $scope.selectedTab = $scope.tabs[0];
                break;

            case '/total':
                $scope.selectedTab = $scope.tabs[1];
                break;

            case '/clienti':
                $scope.selectedTab = $scope.tabs[2];
                break;

            case '/centralizator':
                $scope.selectedTab = $scope.tabs[3];
                break;

            case '/optiuni':
                $scope.selectedTab = $scope.tabs[4];
                break;

            default:
                $scope.selectedTab = $scope.tabs[0];
                break;
        }

Ответ 9

Я получил вкладки с маршрутизацией, работающие следующим образом.

Он способен делать все, что вам нужно, от динамических вкладок, и на самом деле это очень просто.

  • Вкладки с ui-view, поэтому он может динамически загружать шаблоны,
  • Обновить маршрутизацию в URL
  • Установить состояние истории
  • При непосредственном перемещении по маршруту с видом с вкладками правильная вкладка отмечена как active.

Определите вкладки с параметром в маршрутизаторе

.state('app.tabs', {
    url         : '/tabs',
    template    : template/tabs.html,
})
.state('app.tabs.tab1', {
    url         : '/tab1',
    templateUrl : 'template/tab1.html',
    params      : {
        tab         : 'tab1'
    }
})
.state('app.visitors.browser.analytics', {
    url         : '/tab1',
    templateUrl : 'template/tab2.html',
    params      : {
        tab         : 'tab2'
    }
})

Шаблон вкладок (tabs.html) -

<div ng-controller="TabCtrl as $tabs">
    <uib-tabset active="$tabs.activeTab">
        <uib-tab heading="This is tab 1" index="'tab1'" ui-sref="app.tabs.tab1"></uib-tab>
        <uib-tab heading="This is tab 2" index="'tab2'" ui-sref="app.tabs.tab2"></uib-tab>
    </uib-tabset>
    <div ui-view></div>
</div>

Что сопряжено с очень простым контроллером для получения текущей активной вкладки:

app.controller('TabCtrl', function($stateParams) {
    this.activeTab = $stateParams.tab;
})