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.
Share Improve this question edited Jan 21, 2020 at 3:22 Dale K 27.5k15 gold badges58 silver badges83 bronze badges asked Feb 16, 2015 at 13:36 wojjaswojjas 1,0961 gold badge10 silver badges21 bronze badges5 Answers
Reset to default 1Suppose 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();
};