Angular 和引导 UI 选项卡都变为活动状态以防止默认

Posted 2023-03-06

【中文标题】Angular 和引导 UI 选项卡都变为活动状态以防止默认

【英文标题】：Both Angular & bootstrap UI tab become active in prevent default

【发布时间】：2017-05-18 17:01:21

【问题描述】：

我在使用 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"));
        
    

当我尝试这个时会发生什么

我需要什么

请告诉我应该怎么做才能防止这种情况发生。

【参考方案1】：

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

代码更新：

将 css 类应用于 删除了 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);
    );

【讨论】：

我的控制器不同，所以我使用广播，你也可以通过简单地在那里编写这样的代码来做到这一点

当然可以。我的代码在同一个控制器中。它的工作。谢谢兄弟