Angular＆amp; bootstrap UI选项卡变为活动状态以防止默认

Question

使用角度ui标签时遇到了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>

并取消选择功能

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

当我尝试这件事时

我需要什么

请让我知道如何防止这种情况。

Answer 1

尝试使用 $ emit 来解决给定的问题。

  

代码中的更新：

1. 将css课程应用于
2. 删除了deselect =“ctrl.tabSelected（$ event）”

我遇到了同样的问题，我使用$ emit解决了这个问题。

  

这是一段代码：

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