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对话框，我将得到回调结果。我计划阻止默认，然后手动切换，但我无法弄清楚从哪里获得新的标签ID。

任何溶剂都值得赞赏。即使在其他标签实现中更容易。

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

Answer 1

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

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

修改

确实如评论中所述，deselct带有html索引，而不是选项卡索引属性中传递的内容。解决方法可以是：Another Plunk。在这里，我从html索引中提取实际索引。

有一点研究表明这个问题可能已经修复了3.0 bootstrap tpl See this

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

要求确认何时更改角度引导程序中的选项卡

2 个答案: