10

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

我使用deselect()element 的属性<tab>，记录在这里，在我的控制器中触发一个函数，并且我确定我不应该更改选项卡。含义：我不想取消选择这个并选择用户点击的另一个。

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

我不能只是做，$event.stopPropagation()因为我没有在$event这里......我错过了什么？

Plunker隔离问题。

4

5 回答 5

1

假设您有 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();
    }
};
于 2017-06-05T14:49:04.960 回答
0

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

<tab  disabled="true" ng-click="warnUserNotSavedChanges()">
于 2015-05-22T11:09:28.387 回答
0

看看这个问题评论。这对我帮助很大。

于 2015-12-07T21:15:34.830 回答
0

请将此标签解决方案使用以下代码，它对我有用。

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

于 2017-05-31T11:35:27.943 回答
-3

Apply ng-click directive to each tab:

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

and then preventDefault();:

$scope.checkChange = function($e) {
    // check if tab can be changed
    $e.preventDefault();
};
于 2015-02-16T14:09:33.880 回答