I want to cancel tab change/panel switch when user clicks another tab and I discover that changes in the current panel are not saved.

I use the deselect() attribute of element <tab>, documented here, to fire a function in my controller and in which I determine that I shouldn't change tab. Meaning: I don't want to deselect this and select the other that user clicked on.

How can I acplish this? preferably from inside the controller, or in any other way?

I can't just do $event.stopPropagation() since I don't have a $event here... what am I missing?

Plunker isolating the problem.

I want to cancel tab change/panel switch when user clicks another tab and I discover that changes in the current panel are not saved.

I use the deselect() attribute of element <tab>, documented here, to fire a function in my controller and in which I determine that I shouldn't change tab. Meaning: I don't want to deselect this and select the other that user clicked on.

How can I acplish this? preferably from inside the controller, or in any other way?

I can't just do $event.stopPropagation() since I don't have a $event here... what am I missing?

Plunker isolating the problem.

• javascript
• angularjs
• events
• tabs
• angular-bootstrap

5 Answers 5

Suppose that you have 3 tabs and want the third tab to be unclickable. Then you should add a deselect attribute to clickable tabs, so that when deselect event happens, they checked what tab we're trying to switch to and if it's the third tab, prevented tab switch.

This works only in later versions of ui-bootstrap, around 0.12-0.14, can't say exactly:

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();
    }
};

My solution to prevent the tab change was using the built in disabled flag. If you add an ng-click handler to the tab, you can still react to events. This works if the disabled styling is no problem for you - in your use case this might be the case.

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

Please use below code for this tabs solution, It's worked for me.

//our root app ponent
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 {}

Take a look at this issue ment. It helped me a lot.

Apply ng-click directive to each tab:

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

and then preventDefault();:

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