In angular bootstrap tabs, how to cancel tab change?

Question

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

Answer 1

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