javascript - 在 Angular 引导选项卡中，如何取消选项卡更改？

Question

我想在用户单击另一个选项卡时取消选项卡更改/面板切换，但我发现当前面板中的更改未保存。

我使用 deselect()元素的属性 <tab> , documented here , 在我的 Controller 中触发一个函数，我确定我不应该在其中更改选项卡。意思是:我不想取消选择这个并选择用户点击的另一个。

我怎样才能做到这一点？最好是从 Controller 内部，还是以任何其他方式？

我不能只做 $event.stopPropagation()因为我没有 $event在这里……我错过了什么？

Plunker隔离问题。

Answer 1

假设您有 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();
    }
};