В вкладках бутстрапа angular, как отменить вкладку?

Я хочу отменить вкладку change/panel switch, когда пользователь нажимает на другую вкладку, и я обнаруживаю, что изменения в текущей панели не сохраняются.

Я использую атрибут deselect() элемента <tab>, задокументированный здесь http://angular-ui.github.io/bootstrap/#tabs, чтобы запустить функцию в моем контроллере и в которой я определяю, что я не следует менять вкладку. Значение: я не хочу отменить выбор и выбрать другой, на который пользователь нажал.

Как я могу это сделать? предпочтительно изнутри контроллера или любым другим способом?

Я не могу просто сделать $event.stopPropagation(), так как у меня нет события $здесь... что мне не хватает?

Plunker изолирует проблему: http://plnkr.co/edit/fj5y4WQ4oaEI7FPf2Ilh?p=preview

Ответ 1

Мое решение предотвратить изменение вкладки состояло в использовании встроенного запрещенного флага. Если вы добавите обработчик ng-click на вкладку, вы можете реагировать на события. Это работает, если для вас нет проблем с настройкой стиля - в вашем случае это может быть так.

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

Ответ 2

Взгляните на https://github.com/angular-ui/bootstrap/issues/2715#issuecomment-106511455 мне очень помогли.

Ответ 3

Пожалуйста, используйте нижеприведенный код для этого вкладок, он работал у меня.

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

Предположим, что у вас есть 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();
    }
};

Ответ 5

Применить директиву ng-click к каждой вкладке:

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

а затем preventDefault();:

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