在角度引导程序中更改选项卡时要求确认答案

【问题标题】：Ask to confirm when changing tabs in angular bootstrap在角度引导程序中更改选项卡时要求确认
【发布时间】：2020-01-21 11:30:52
【问题描述】：

我有带有表单的选项卡，我想要求用户在更改选项卡时确认或放弃他们的更改。我当前的代码有效

<uib-tab heading="..." index="3" deselect="main.onDeselect($event)" ... >

this.onDeselect = function($event) {
    if(...isDirty...) {         
        if($window.confirm("Do you want to discard?")) {
            ... discard (and go to new tab) ...
        } else {
            $event.preventDefault(); //stays on current tab
        }
    }
}

问题是我想将确认更改为 javascript 对话框，我会在回调中得到结果。

我打算preventDefault() all 然后手动切换，但我不知道从哪里获得新的标签 ID。

感谢任何解决方案。即使在其他选项卡实现中更容易。

我使用 AngularJS v1.4.7，ui-bootstrap-tpls-1.3.3.min.js

【问题讨论】：

为什么要手动切换？当前仅阻止基于对话响应进行切换的方法是否不起作用？
它可以工作，但所有浏览器都允许用户摆脱 widnow 确认对话框，我无法更改它。这就是我想切换到 MaterialDesign 确认对话框的原因。然后在回调中调用 preventDefault() 为时已晚。

标签： angularjs tabs angular-bootstrap

【解决方案1】：

您可以为此目的使用$selectedIndex 和active 属性。看到这个Plunk

这里需要注意的一点是，当我们手动更改活动属性时，它会再次触发需要处理的取消选择事件。否则它似乎会做你想做的事。

编辑

确实如 cmets 中所述，deselect 带有 HTML 索引，而不是在选项卡索引属性中传入的内容。解决方法可能是：Another Plunk。这里我从 HTML 索引中提取实际索引。

一些研究表明，这个问题可能已经用 3.0 bootstrap tpl See this 解决了。

【讨论】：

是的，如果标签的索引与其在 html 中的位置相同，它就可以工作。当我使用 ng-if 隐藏一个选项卡时，我遇到了一个问题，然后它选择了错误的选项卡。我将其更改为 ng-show 现在似乎还可以。有没有办法将 $selectedIndex 转换为 html 中声明的索引？

【解决方案2】：

我花了一些时间使用不同的方法，这个方法稳定了一段时间。我要做的是防止在开始时取消选择并在确认松动更改时在回调中设置新选项卡...

    this.onDeselect = function($event, $selectedIndex) {
        var me = this;
        if(this.tabs.eventDirty || this.tabs.locationDirty || this.tabs.contractDirty) {

            $event.preventDefault();

            var alert = $mdDialog.confirm({
                title: 'Upozornění',
                textContent: 'Na záložce jsou neuložené změny. Přejete si tyto změny zrušit a přejít na novou záložku?',
                ok: 'Přijít o změny',
                cancel: 'Zůstat na záložce'
              });

             $mdDialog
                .show( alert )
                .then(function() {
                    $rootScope.$emit("discardChanges");
                    me.tabs.activeTab = $selectedIndex;
                })
        }
    };

【讨论】：