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

Question

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

Например:

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

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

$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; 
     } 

Answer 6

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

Answer 7

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

Answer 8

Использование данных целевых = «# tab1». Работал для меня

Answer 9

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

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

Answer 10

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

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

• Вкладка с 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; 
})