在角度引導選項卡中，如何取消選項卡更改？

Question

我想在用戶單擊另一個選項卡時取消選項卡更改/面板切換，但我發現當前面板中的更改未保存。

我使用這里記錄的元素<tab>的deselect()屬性在我的控制器中觸發一個函數，並在其中確定我不應該更改選項卡。 含義：我不想取消選擇它並選擇用戶單擊的另一個。

我怎樣才能做到這一點？ 最好是從控制器內部，還是以任何其他方式？

我不能只做$event.stopPropagation()因為我這里沒有$event ......我錯過了什么？

隔離問題的Plunker 。

Answer 1

我防止選項卡更改的解決方案是使用內置的禁用標志。 如果向選項卡添加 ng-click 處理程序，您仍然可以對事件做出反應。 如果禁用的樣式對您沒有問題，這將起作用 - 在您的用例中可能是這種情況。

<tab  disabled="true" ng-click="warnUserNotSavedChanges()">

Answer 2

看看這個問題評論。 這對我幫助很大。

Answer 3

請將此選項卡解決方案使用以下代碼，它對我有用。

 //our root app component import {Component, NgModule, VERSION} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' import { TabsModule } from 'ngx-bootstrap'; @Component({ selector: 'my-app', template: ` <tabset> <tab heading='Tab 1'>Tab 1 content</tab> <tab> <template tabHeading> <div (click)="tryToSwitch($event)"> Tab 2 </div> </template> Tab 2 content </tab> </tabset> `, }) export class App { tryToSwitch(e) { let result = confirm('Are you sure?'); if(!result) { e.stopPropagation(); } } } @NgModule({ imports: [ BrowserModule, TabsModule.forRoot() ], declarations: [ App ], bootstrap: [ App ] }) export class AppModule {}

Answer 4

假設您有 3 個選項卡並希望第三個選項卡不可點擊。 然后你應該為可點擊的選項卡添加一個deselect屬性，這樣當取消選擇事件發生時，他們檢查我們試圖切換到哪個選項卡，如果它是第三個選項卡，則阻止選項卡切換。

這僅適用於 ui-bootstrap 的更高版本，大約 0.12-0.14，不能確切地說：

template.html

<uib-tabset class="tab-animation" active="activeTab">
    <uib-tab index="0" heading="Overview" id="overview" deselect="checkTab($event, $selectedIndex)"></uib-tab>
    <uib-tab index="1" heading="Details" id="details" deselect="checkTab($event, $selectedIndex)"></uib-tab>
    <uib-tab index="2" heading="Download" id="download"></uib-tab>
</uib-tabset>

controller.js

// Downloads tab shouldn't be clickable
$scope.checkTab = function($event, $selectedIndex) {
    // $selectIndex is index of the tab, you're switching to
    if ($selectedIndex == 2) { // last tab is non-switchable
        $event.preventDefault();
    }
};

Answer 5

將ng-click指令應用於每個選項卡：

<tab ng-click="checkChange($event)">

然后preventDefault(); ：

$scope.checkChange = function($e) {
    // check if tab can be changed
    $e.preventDefault();
};