[英]Both Angular & bootstrap UI tab become active in prevent default
I have a CSS problem while using Angular UI-Tab.我在使用 Angular UI-Tab 时遇到了 CSS 问题。 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.因此,当我阻止事件 CSS 显示两个选项卡都处于活动状态时。 Because the click has just begin but stopped on the way.因为点击才刚刚开始,但在途中停止了。
My HTML us:我的 HTML 我们:
<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而deselect()
函数是
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 .尝试使用$emit解决给定的问题。
Updates in your code :代码中的更新:
I faced same problem and I resolved it using $emit.我遇到了同样的问题,我使用 $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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.