Javascript 在角引导选项卡中，如何取消选项卡更改？

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

我使用元素

的

取消选择（）

属性在我的控制器中启动一个函数，并在其中确定不应更改选项卡。意思：我不想取消选择这个，而选择用户单击的另一个

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

我不能只做

$event.stopPropagation（）

，因为我这里没有

$event

。。。我错过了什么

---

隔离问题。

对每个选项卡应用

ng单击
指令：

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

我防止选项卡更改的解决方案是使用内置的禁用标志。如果将ng click处理程序添加到选项卡，则仍然可以对事件作出反应。如果禁用的样式对您来说没有问题，那么这是可行的-在您的用例中可能就是这样

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

看一看。它帮了我很大的忙。
请使用下面的代码作为这个选项卡解决方案，它对我很有用


//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，VERSION}
从“@angular/platform browser”导入{BrowserModule}
从“ngx引导”导入{TabsModule}；
@组成部分({
选择器：“我的应用程序”，
模板：`
表1内容
表2
表2内容
`,
})
导出类应用程序{
试运行开关（e）{
让结果=确认（'你确定吗？'）；
如果（！结果）{
e、 停止传播（）；
}
}
}
@NGD模块({
导入：[BrowserModule，TabsModule.forRoot（）]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}
假设您有3个选项卡，并且希望第三个选项卡不可链接。然后，您应该向可单击的选项卡添加一个
deselect
属性，以便在发生取消选择事件时，他们检查我们尝试切换到的选项卡，如果是第三个选项卡，则检查阻止的选项卡切换

这只适用于更高版本的ui引导，约为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>

我试过了，但是$e是未定义的，所以我得到：“TypeError:无法读取未定义的属性'preventDefault'”虽然定义了一个“事件”，但这是一些全局性的，对它执行preventDefault（）对我没有帮助。我不确定我阻止使用的默认设置是什么。将$event传递给select和deselect会在控制器内部产生未定义的错误。你指的是“例子”你指的是你在这里展示的东西吗？或者是有一些这样的例子吗？顺便说一句，谢谢你的快速回复。还请注意，取消选择将首先激发，然后选择。我想我应该取消选择。好主意，我以前也试过。定义了执行此$event。使用ng click解决方案的问题在于，此时我们已经在单击的选项卡上（尽管激活该选项卡时会发生所有不需要的事情），我们要取消什么？选项卡更改已经完成。我想我可以，在一些全局变量中，保存剩下的选项卡（在其取消选择中），现在将其重新选择。。。但我真正想做的是尽快取消整件事。很抱歉，但是您的更新没有帮助。为了澄清：我尝试过，现在定义了$event，但是$even.preventDefault（）无效，新选择的选项卡仍然处于选中状态。因为不应该留下的选项卡已经留下很久了，带有未保存的更改…：-（好的，你能提出一个小问题吗？我们会解决的；）这是角度而不是角度？出于某种原因，$selectedIndex是未定义的
<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>

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