В AngularJS пользовательский интерфейс начальной загрузки вкладок, поддержка маршрутизации

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

Например:

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

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

Что бы быть лучшим способом, чтобы добавить маршрутизации?

Программирование
angularjs angularjs-directive angular-ui-bootstrap bootstrap-tabs
1-го июня 2013 в 11:26
19 просмотров
Решение

Для добавления маршрутизации вы обычно используете НГ-вид директивы. Я'м не уверен, что это's легко достаточно для изменения угловой UI, чтобы поддержать то, что вы'вэ искал, но здесь'ы в plunker]1 показывает примерно то, что я думаю, что вы'вновь ищет (он's не обязательно лучший способ сделать это - надеюсь, кто-то может дать вам лучшее решение или изменить свое отношение к этой)

Комментарии (3)

Использовать данные-цель=" и#tab1 в том, что". Работал для меня

Комментарии (2)

Этот ответ действительно помог мне http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx (очень простой, но мощное решение)

Комментарии (0)

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

Комментарии (0)

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

Комментарии (0)

вы можете передать свой собственный пар ключ-значение в определении маршрута и добиться этого. здесь'хороший пример: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Комментарии (2)

Если у вас есть маршрут под названием "Settings" и вы хотите, чтобы вкладки в разделе настроек что-то, как это работает.


<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>
                   Activate email
                   Deactivate email
                </div>
            </div>
          </div>
          <div id="signature" class="tab-pane fade">
              <textarea ui-tinymce="tinymceOptions" ng-model="signature">
Комментарии (1)

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

$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;
        }
Комментарии (0)

У меня есть вкладки с маршрутизацией работает следующим образом.

Это'ы уметь делать все, что вы хотите от динамических вкладок, и It'ов на самом деле очень просто.

  • Вкладки с интерфейс зрения, поэтому он может динамически загружать шаблоны
  • Маршрутизация обновление в URL
  • Установить государственную истории
  • При непосредственном переходе к маршруту с целью вкладками, правильная закладка помечается как "активный".

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

.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">




    <div ui-view></div>
</div>

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

app.controller('TabCtrl', function($stateParams) {
    this.activeTab = $stateParams.tab;
})
Jeffrey Roosendaal
Редактировал ответ 6-го июля 2017 в 1:09
Комментарии (0)

Это имущество должно быть в состоянии сделать то, что вы хотите:

https://github.com/angular-ui/ui-router

Комментарии (1)