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

I want to cancel tab change/panel switch when user clicks another tab and I discover that changes in the current panel are not saved.

当用户单击另一个选项卡时，我想取消选项卡更改/面板切换，我发现当前面板中的更改没有保存。

I use the deselect() attribute of element <tab>, documented here http://angular-ui.github.io/bootstrap/#tabs, to fire a function in my controller and in which I determine that I shouldn't change tab. Meaning: I don't want to deselect this and select the other that user clicked on.

我使用元素的取消选择()属性，这里记录了http://angular-ui.github。io/bootstrap/#选项卡，在我的控制器中触发一个函数，在这个函数中我决定不应该更改选项卡。意思是:我不想取消选择，选择用户点击的另一个。

How can I accomplish this? preferably from inside the controller, or in any other way?

我怎样才能做到这一点呢?最好是从控制器内部，还是以其他方式?

I can't just do $event.stopPropagation() since I don't have an $event here... what am I missing?

我不能只做$event. stoppropagation()，因为这里没有$event…我缺少什么?

Plunker isolating the problem: http://plnkr.co/edit/fj5y4WQ4oaEI7FPf2Ilh?p=preview

隔离问题:http://plnkr.co/edit/fj5y4WQ4oaEI7FPf2Ilh?p=preview

5 个解决方案

#1

My solution to prevent the tab change was using the built in disabled flag. If you add an ng-click handler to the tab, you can still react to events. This works if the disabled styling is no problem for you - in your use case this might be the case.

我的解决方案是使用内置的禁用标志。如果您在选项卡中添加了一个ng-click处理程序，您仍然可以对事件作出反应。如果禁用的样式对您来说没有问题，那么可以这样做——在您的用例中，可能是这种情况。

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

#2

Take a look at https://github.com/angular-ui/bootstrap/issues/2715#issuecomment-106511455 helped me a lot.

看看https://github.com/angular-ui/bootstrap/issues/2715# issues -106511455对我帮助很大。

#3

Please use below code for this tabs solution, It's worked for me.

请使用下面的代码为这个选项卡解决方案，它是为我工作。

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { TabsModule } from 'ngx-bootstrap';

@Component({
  selector: 'my-app',
  template: `
   <tabset>
    <tab heading='Tab 1'>Tab 1 content</tab>
    <tab>
      <template tabHeading>
        <div (click)="tryToSwitch($event)">
          Tab 2
        </div>
      </template>
      Tab 2 content
    </tab>
  </tabset>

  `,
})
export class App {
  tryToSwitch(e) {
    let result = confirm('Are you sure?');
    if(!result) {
      e.stopPropagation();
    }
  }
}

@NgModule({
  imports: [ BrowserModule, TabsModule.forRoot() ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

#4

Suppose that you have 3 tabs and want the third tab to be unclickable. Then you should add a deselect attribute to clickable tabs, so that when deselect event happens, they checked what tab we're trying to switch to and if it's the third tab, prevented tab switch.

假设您有三个选项卡，并希望第三个选项卡不可点击。然后，您应该向可单击的选项卡添加取消选择属性，以便当取消选择事件发生时，他们检查我们要切换到哪个选项卡，如果是第三个选项卡，则阻止选项卡切换。

This works only in later versions of ui-bootstrap, around 0.12-0.14, can't say exactly:

这只适用于ui-bootstrap的后期版本，约为0.12-0.14，不能确切地说:

template.html

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>

controller.js

controller.js

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

#5

-3

Apply ng-click directive to each tab:

对每个选项卡应用ng-click指令:

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

and then preventDefault();:

然后preventDefault();。

$scope.checkChange = function($e) {
    // check if tab can be changed
    $e.preventDefault();
};

#1

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

#2