Question

我想在用户点击另一个标签时取消标签更改/面板切换，我发现当前面板中的更改未保存。

我使用元素deselect()的{{1}}属性documented here来触发我的控制器中的一个函数，并确定我不应该更改标签。含义：我不想取消选择此选项并选择用户点击的其他用户。

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

我不能只做$ event.stopPropagation（）因为我在这里没有$ event ...我错过了什么？

Plunker隔离问题。

Answer 1

请使用此选项卡解决方案的以下代码，这对我有用。

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

Answer 2

我阻止更改标签的解决方案是使用内置的禁用标志。如果向选项卡添加ng-click处理程序，您仍然可以对事件做出反应。如果禁用样式对您没有问题，则可以使用 - 在您的用例中可能就是这种情况。

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

Answer 3

看看this issue comment。它对我帮助很大。

Answer 4

假设您有3个标签，并希望第三个标签不可点击。然后，您应该为可点击标签添加deselect属性，以便在取消选择事件时，他们会检查我们要切换到的标签，如果是第三个标签，则会阻止标签切换。

这仅适用于ui-bootstrap的更高版本，大约0.12-0.14，无法准确说出：

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

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

Answer 5

将ng-click指令应用于每个标签：

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

然后preventDefault();：

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

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

5 个答案: