Угловой UT Bootstrap Tabset: Запретить переключение вкладок

У меня возникли проблемы, чтобы попытаться предотвратить переключение табуляции. Это плункер. http://plnkr.co/edit/v1i1cmBzqGo7hmWkhIh4?p=preview Когда пользователь щелкает вкладку «Оповещение», я хочу выполнить некоторый условный тест и запретить, чтобы вкладка «Предупреждение» не выбрана. Как я могу это сделать? И еще один вопрос, когда каждая вкладка связана с состоянием ui. И когда вкладка изменена, состояние ui также меняется. Я хочу предотвратить это, и я сделал этот код.Угловой UT Bootstrap Tabset: Запретить переключение вкладок

$rootScope.$on('$stateChangeStart', 
     function(event, toState, toParams, fromState, fromParams){ 
      event.preventDefault(); 

      destinationTab.active = false; 
      sourceTab.active = true; 
     });

После этого кода исходная вкладка не активна.

источник

2014-12-23 Georgi Kovachev

Я тоже столкнулся с этой проблемой и написал небольшую директиву, чтобы исправить это. Это супер взломанный, но в основном он ищет все заголовки заголовков вкладок, добавляет событие щелчка, переворачивает порядок событий каждой ссылки, чтобы заставить наше событие стрелять до углов, а затем использовать обещания, чтобы позволить методу контроллера управлять переключением вкладок. Это должно работать с их атрибутами select/deselect.

Директива:

.directive('tabPrevent', ['$q', '$timeout', function ($q, $timeout) { 
    'use strict'; 

    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var tabHeadings = element.find('ul li a'), 
        tabEvents = []; 

      if (attrs.tabPrevent) { 
       tabHeadings.bind('click', function (e) { 
        e.stopImmediatePropagation(); 

        var deferred = $q.defer(), 
          self = this, 
          tabIndex = -1 

        // find tab index for tabEvents reference 
        angular.forEach(tabHeadings, function (tab, index) { 
         if (tab === self) { 
          tabIndex = index; 
         } 
        }); 

        // call controller method, passing promise 
        scope.$eval(attrs.tabPrevent + '(deferred)', { deferred: deferred }); 

        deferred.promise.then(function (success) { 
         // initiate call to next event in array, which switches the tab 
         $timeout(function() { 
          tabEvents[tabIndex].click[1].handler(e); 
         }); 
        }); 
       }); 

       // flip event order to make our event fire before angular's 
       angular.forEach(tabHeadings, function (tabHeading) { 
        var clickEvents = $._data(tabHeading, "events"); 
        tabEvents.push(clickEvents); // save list of click events 
        clickEvents.click.unshift(clickEvents.click.pop()); // reverse events 
       }); 
      } 
     } 
    }; 

}]);

HTML:

 <tabset tab-prevent="checkTab"> 
      <tab heading="{{tabs[0].title}}" active="tabs[0].active">Tab 1</tab> 
      <tab heading="{{tabs[1].title}}" active="tabs[1].active">Tab 2</tab> 
      <tab heading="{{tabs[2].title}}" active="tabs[2].active">Tab 3</tab> 
     </tabset>

Контроллер:

$scope.checkTab = function (deferred) { 
     if ($scope.form && $scope.form.$dirty) { 
      deferred.reject(); // stops tab switch 
     } else { 
      deferred.resolve(); // allows tab swtich 
     } 
    };

источник

2015-01-12 01:26:14

Угловой UT Bootstrap Tabset: Запретить переключение вкладок

ответ

Смежные вопросы