我在使用 Angular UI-Tab 时遇到 CSS 问题。问题是我有一个场景,其中有两个选项卡。我需要根据某些条件防止选项卡切换。
为此我使用了防止默认。因此,当我阻止事件时,CSS 显示两个选项卡都处于事件状态。因为点击刚刚开始,中途停止了。
我的 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>
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"));
}
}
当我尝试这个时发生的事情是
我需要什么
请让我知道我应该怎么做才能防止这种情况发生。
最佳答案
尝试使用 $emit 解决给定的问题。
Updates in your code :
- 将 css 类应用于
- 删除了取消选择="ctrl.tabSelected($event)"
我遇到了同样的问题,我使用 $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);
});
关于css - Angular 和 bootstrap UI 选项卡都处于事件状态以防止默认,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41463230/