当在angular bootstrap中更改选项卡时，请询问确认

Question

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

<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()全部，然后手动切换，但我不知道在哪里得到新的标签id。

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

我使用AngularJS v1.4.7, ui-bootstrap-tpl -1.3.3 min.js

Answer 1

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

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

编辑

正如评论中所指出的，deselect携带HTML索引，而不是在标签索引属性中传递的内容。一个变通的办法是:另一个Plunk。这里我从HTML索引中提取实际索引。

和一个小的研究表明，这个问题可能也已经修复了3.0 bootstrap tpl看到这个

Answer 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;
                })
        }
    };