Nelle schede di bootstrap angolari, come annullare il cambio di tabulazione?

Question

Desidero annullare la modifica scheda/l'interruttore del pannello quando l'utente fa clic su un'altra scheda e scopro che le modifiche nel pannello corrente non vengono salvate.

Uso l'attributo deselect() dell'elemento <tab>, documentato qui http://angular-ui.github.io/bootstrap/#tabs, per attivare una funzione nel mio controller e in cui determino che non devo cambiare scheda. Significato: non voglio deselezionare questo e selezionare l'altro utente su cui si è fatto clic.

Come posso realizzare questo? preferibilmente dall'interno del controller o in altro modo?

Non posso semplicemente fare $ event.stopPropagation() poiché non ho un evento $ qui ... cosa mi manca?

Plunker isolare il problema: http://plnkr.co/edit/fj5y4WQ4oaEI7FPf2Ilh?p=preview

Answer 1

Applicare ng-click direttiva per ciascuna scheda:

<tab ng-click="checkChange($event)"> 

e poi preventDefault();:

$scope.checkChange = function($e) { 
    // check if tab can be changed 
    $e.preventDefault(); 
}; 

Answer 2

La mia soluzione per evitare che il cambiamento scheda stava usando il costruito nella bandiera disabilitata. Se aggiungi un gestore di click ng alla scheda, puoi comunque reagire agli eventi. Questo funziona se lo stile disabilitato non è un problema per te - nel tuo caso d'uso questo potrebbe essere il caso.

<tab disabled="true" ng-click="warnUserNotSavedChanges()"> 

Answer 3

Dai un'occhiata a https://github.com/angular-ui/bootstrap/issues/2715#issuecomment-106511455 mi ha aiutato molto.

Answer 4

Si prega di utilizzare sotto il codice per questa soluzione di schede, ha funzionato per me.

//our root app component 
 
import {Component, NgModule, VERSION} from '@angular/core' 
 
import {BrowserModule} from '@angular/platform-browser' 
 
import { TabsModule } from 'ngx-bootstrap'; 
 

 
@Component({ 
 
    selector: 'my-app', 
 
    template: ` 
 
    <tabset> 
 
    <tab heading='Tab 1'>Tab 1 content</tab> 
 
    <tab> 
 
     <template tabHeading> 
 
     <div (click)="tryToSwitch($event)"> 
 
      Tab 2 
 
     </div> 
 
     </template> 
 
     Tab 2 content 
 
    </tab> 
 
    </tabset> 
 

 
    `, 
 
}) 
 
export class App { 
 
    tryToSwitch(e) { 
 
    let result = confirm('Are you sure?'); 
 
    if(!result) { 
 
     e.stopPropagation(); 
 
    } 
 
    } 
 
} 
 

 
@NgModule({ 
 
    imports: [ BrowserModule, TabsModule.forRoot() ], 
 
    declarations: [ App ], 
 
    bootstrap: [ App ] 
 
}) 
 
export class AppModule {}

Answer 5

Supponiamo di avere 3 schede e desidera che la terza linguetta di essere cliccabile. Quindi è necessario aggiungere un attributo deselect alle schede selezionabili, in modo che quando si deseleziona l'evento, abbiano controllato la scheda su cui si sta tentando di passare e se si tratta della terza scheda, opzione di tabulazione impedita.

Questo funziona solo nelle versioni successive di ui-bootstrap, intorno 0,12-0,14, non si può dire esattamente:

template.html

<uib-tabset class="tab-animation" active="activeTab"> 
    <uib-tab index="0" heading="Overview" id="overview" deselect="checkTab($event, $selectedIndex)"></uib-tab> 
    <uib-tab index="1" heading="Details" id="details" deselect="checkTab($event, $selectedIndex)"></uib-tab> 
    <uib-tab index="2" heading="Download" id="download"></uib-tab> 
</uib-tabset> 

controller.js

// Downloads tab shouldn't be clickable 
$scope.checkTab = function($event, $selectedIndex) { 
    // $selectIndex is index of the tab, you're switching to 
    if ($selectedIndex == 2) { // last tab is non-switchable 
     $event.preventDefault(); 
    } 
};