Как Угловая, так и загрузочная вкладка пользовательского интерфейса становятся активными в предотвращении по умолчанию

Question

Я столкнулся с проблемой css при использовании угловой вкладки ui. Проблема в том, что у меня есть сценарий, в котором я получил две вкладки. Мне нужно предотвратить переключение табуляции на основе некоторого состояния. Для этого я использовал предотвратить дефолт. Поэтому, когда я предотвращаю событие, css показывает, что обе вкладки активны. Потому что клик только начал, но остановился на пути.

Мои коды HTML

<uib-tabset> 
    <uib-tab index="1"> 
    <uib-tab-heading>Search</uib-tab-heading> 
     <div class="PL_7 PR_7"> 
      <div class="clearfix"> 
       search tab 
      </div> 
     </div> 
    </uib-tab> 
    <uib-tab index="2" ng-click="ctrl.activateOrderBinTab()" deselect="ctrl.tabSelected($event)"> 
    <uib-tab-heading>Order</uib-tab-heading> 
     <div class="PL_7 PR_7"> 
      order tab 
     </div> 
    </uib-tab> 
</uib-tabset> 

и отмените функция

function tabSelected($event) { 
     var unsavedRows = angular.element('.dx-cell-modified'); 
     if (unsavedRows.length > 0) { 
      $event.preventDefault(); 
      NotifyToastService.showError(gettext("Please save or cancel changes to the order bin to add items")); 
     } 
    } 

Когда я попытался это то, что случиться

Что мне нужно

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

Answer 1

Попробуйте решить данную проблему, используя $ emit.

Обновления в коде:

1. Прикладной класс CSS к
2. удален Deselect = "ctrl.tabSelected ($ событие)"

я столкнулся с той же проблемой, и я разрешил его с помощью $ emit.

Вот код:

<uib-tabset class="selectedTab"> 
    <uib-tab index="1"> 
    <uib-tab-heading>Search</uib-tab-heading> 
     <div class="PL_7 PR_7"> 
      <div class="clearfix"> 
       search tab 
      </div> 
     </div> 
    </uib-tab> 
    <uib-tab index="2" ng-click="ctrl.activateOrderBinTab()"> 
    <uib-tab-heading>Order</uib-tab-heading> 
     <div class="PL_7 PR_7"> 
      order tab 
     </div> 
    </uib-tab> 
</uib-tabset> 


function tabSelected($event) { 
     var unsavedRows = angular.element('.dx-cell-modified'); 
     if (unsavedRows.length > 0) { 
      $event.preventDefault(); 
      NotifyToastService.showError(gettext("Please save or cancel changes to the order bin to add items")); 
      $rootScope.$emit('selectedTab', 2); 
     } 
    } 

$rootScope.$on('selectedTab', function (event, newTabIndex) { 
     $timeout(function() { 
      ctrl.selectedTab = newTabIndex; 
      //this is needed to set the focus on active tab element 
      //to overcome css focus styling 
      angular.element(".selectedTab ul > li:nth-child(" + (newTabIndex) + ") a").focus(); 
     }, 1); 
    });