ngbtooltip - AngularJS UI Bootstrap Pestañas que admiten el enrutamiento

ngx bootstrap

Question

Me gustaría usar las pestañas Bootstrap de AngularJS UI en mi proyecto, pero lo necesito para admitir el enrutamiento.

Por ejemplo:

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

Por lo que puedo decir del código fuente, las tabs actuales y las directivas del pane no admiten el enrutamiento.

¿Cuál sería la mejor manera de agregar enrutamiento?

Answer 1

Esta respuesta realmente me ayudó http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx (solución muy simple pero poderosa)

Answer 2

Esto es para poder hacer lo que quieras:

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

Answer 3

Estoy de acuerdo con el uso de UI-Router que rastrea estados y funciona muy bien con vistas anidadas. Hablando en particular de su problema con las pestañas Bootstrap, existe una gran implementación que aprovecha el enrutador UI : pestañas UI-Router

Answer 4

Para agregar enrutamiento, normalmente utiliza una directiva ng-view. No estoy seguro de que sea lo suficientemente fácil modificar la interfaz de usuario angular para que sea compatible con lo que está buscando, pero aquí hay un plunker que muestra aproximadamente lo que creo que está buscando (no es necesariamente la mejor manera de hacerlo). usted una mejor solución o mejorar en esto)

Answer 5

Si tiene una ruta llamada configuración y quiere tener pestañas en esa página de configuración, algo así funciona.

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

También tengo este requisito y estoy haciendo algo similar a la respuesta proporcionada por Chris, pero también estoy usando el enrutador AngularUI , porque ngRouter no admite vistas anidadas y es posible que tenga la vista de contenido de pestañas dentro de otra vista (Lo hice) y eso no funcionará con ng-view.

Answer 7

Tengo pestañas con enrutamiento que funcionan de la siguiente manera.

Puede hacer todo lo que quiera de pestañas dinámicas, y en realidad es muy simple.

• Pestañas con ui-view , por lo que puede cargar dinámicamente plantillas,
• Actualizar el enrutamiento en la URL
• Establecer el estado del historial
• Cuando navega directamente a una ruta con una vista con pestañas, la pestaña correcta se marca como active .

Defina las pestañas con un parámetro en su enrutador

.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''
    }
})

La plantilla de pestañas (tabs.html) es

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

Que se combina con un controlador muy simple para obtener la pestaña activa actual:

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

Answer 8

Use data-target = "# tab1". Trabajó para mi

Answer 9

podría pasar sus propios pares de valores clave personalizados en la definición de ruta y lograr esto. he aquí un buen ejemplo: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Answer 10

solo una pequeña adición a la respuesta aceptada: necesitaba mantener la pestaña actual al actualizar la página, así que utilicé un interruptor como este:

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