I have a CSS problem while using Angular UI-Tab. The Issue is that I have a scenario in which I got two tabs. I need to prevent tab switching based on some condition.
For that I had used prevent default. So when I prevent the event CSS shows that both tab is active. Because the click has just begin but stopped on the way.
My HTML us:
<uib-tabset>
<uib-tab index="1">
<uib-tab-heading>Search</uib-tab-heading>
<div class="PL_7 PR_7">
<div class="clearfix">
search tab
</div>
</div>
</uib-tab>
<uib-tab index="2" ng-click="ctrl.activateOrderBinTab()" deselect="ctrl.tabSelected($event)">
<uib-tab-heading>Order</uib-tab-heading>
<div class="PL_7 PR_7">
order tab
</div>
</uib-tab>
</uib-tabset>
and the deselect()
function is
function tabSelected($event) {
var unsavedRows = angular.element('.dx-cell-modified');
if (unsavedRows.length > 0) {
$event.preventDefault();
NotifyToastService.showError(gettext("Please save or cancel changes to the order bin to add items"));
}
}
When I tried this what happen is
What I need
Please let me know what should I do to prevent this.
Try to solve given problem using $emit.
Updates in your code :
I faced same problem and I resolved it using $emit.
Here is a code :
<uib-tabset class="selectedTab">
<uib-tab index="1">
<uib-tab-heading>Search</uib-tab-heading>
<div class="PL_7 PR_7">
<div class="clearfix">
search tab
</div>
</div>
</uib-tab>
<uib-tab index="2" ng-click="ctrl.activateOrderBinTab()">
<uib-tab-heading>Order</uib-tab-heading>
<div class="PL_7 PR_7">
order tab
</div>
</uib-tab>
</uib-tabset>
function tabSelected($event) {
var unsavedRows = angular.element('.dx-cell-modified');
if (unsavedRows.length > 0) {
$event.preventDefault();
NotifyToastService.showError(gettext("Please save or cancel changes to the order bin to add items"));
$rootScope.$emit('selectedTab', 2);
}
}
$rootScope.$on('selectedTab', function (event, newTabIndex) {
$timeout(function () {
ctrl.selectedTab = newTabIndex;
//this is needed to set the focus on active tab element
//to overcome css focus styling
angular.element(".selectedTab ul > li:nth-child(" + (newTabIndex) + ") a").focus();
}, 1);
});