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

I have tabs with forms and i want ask user to confirm to discard the changes when changing tabs. My current code works

我有表格的标签,我想让用户确认在更改标签时放弃更改。我目前的代码有效

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

The problem is I want to change confirm to javascript dialog and I will get result in callback. I planed to preventDefault all and then switch manually, but I cannot figure out where to get new tab id.

问题是我想将确认更改为javascript对话框,我将得到回调结果。我计划阻止所有,然后手动切换,但我无法弄清楚从哪里获得新的标签ID。

Any sollution is appreciated. Even if it is easier in other tab implementations.

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

I use AngularJS v1.4.7, ui-bootstrap-tpls-1.3.3.min.js

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

2 个解决方案

#1

You can make use of $selectedIndex and the active property for that purpose. See this Plunk

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

One thing to be noted here is that when we manually change the active property, it again fires the deselect event which needed to be handled. Otherwise it seems to do what you wanted.

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

Edit

Indeed as noted in the comments, the deselct carries the html index rather than what is passed in in the tab index property. A workaround could be in this: Another Plunk. Here I'm pulling the actual index from the html index.

确实如评论中所述,deselct带有html索引而不是tab属性中传入的内容。解决方法可能就是:另一个Plunk。在这里,我从html索引中提取实际索引。

And a little research indicates that this issue might as well be fixed already with 3.0 bootstrap tpl See this

稍微研究表明这个问题可能已经用3.0 bootstrap tpl修复了。看到这个

#2

I spent some time with different approaches and this one is stable for some time. What I do is to prevent deselect at the beginning and set the new tab in callback if confirmed to loose changes...

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

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

#1