Директива AngularJS для вкладок BootStrap UI (проблемы с изолированной областью)

Question

Я пытаюсь создать директиву для работы с вкладками «Угловой пользовательский интерфейс».
Основная цель этой директивы - запомнить выбранные вкладки.
Я смотрел на все решения там и никто, кажется, решить эту проблему для вкладок не установленных в контроллере:

<tabset> 
    <tab heading="Customers" sctab>Customer tab content</tab> 
    <tab heading="Sales" sctab>Sales Tab Content</tab> 
</tabset> 

Примечание «sctab» мое имя директивы. Здесь у меня есть следующие работы:

• ушко щелчке он получит набор URL, хэш, как закладка заголовок Name
• Это хэш запоминается при нажатии на ссылку, а затем вернуться назад.
• При загрузке страницы идентифицировать вкладку (или элемент), который соответствует хэш

Однако я запустить в блоке дороги на конечной стадии:

• активации вкладки, которая соответствует URL hash

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

Я считаю, что активное состояние задано в переменной-изоляторе для указателя вкладки ui bootstrap, называемого «активным».

ngClass также связан с этой переменной:

ng-class="{active: active, disabled: disable}" 

Так в основном здесь я пытался установить активный = верно для закладки в попытке активировать вкладку (не дало никаких результатов).
Прежде чем углубиться в подробности, я остановлюсь здесь, чтобы узнать, есть ли у кого-то идеи, основанные на том, что я пробовал.
Вот моя директива:

angular.module('jonsmodule') 
.directive('sctab', ['$rootScope', '$state', '$location', function($rootScope, $state, $location) { 
    return { 
     restrict: "A", 
     link: function (scope, element, attrs) { 

      /** 
      * INITIALIZING THE ACTIVE TAB FROM HASH 
      */ 
      scope.$watch(
       // watch for setting of the element heading (so we know when the bootstrap tabs are loaded) 
       function() { return element.children().first('p')[0].innerText; }, 
       function (newValue, oldValue) { 
        // when ui-bootstrap tabs loaded 
        if (newValue !== oldValue) { 

         // if hash matches the tab heading name 
         if ($location.hash() == newValue.trim()) { 

          /** 
          * ******** NEED HELP HERE ************ 
          * THE GOAL HERE IS TO SET THE TAB ACTIVE 
          * it does not work completely 
          * below is a list of things I tried 
          */ 

          //$(element).tab('show'); // .tab is not a function 

          $(element).addClass('active'); // changes the class but the tab will not change 

          scope.$$childHead.active = true; // appears to not save 

          // attrs.$set('ngClass', {active: true, disabled: false}); // this does not appear to change anything 

         } else { 
          scope.$$childHead.active = false; // appears to save and the first tab is not selected 
         } 

        } 

       } 
      ); 

      /** 
      * CHANGING THE TAB 
      */ 
      // get the state (controller) 
      var current_state = $state.current.name; 

      // on tab change set the hash 
      element.on('click', function() { 
       var tabLabel = element.children().first('p')[0].innerText; 
       history.pushState(null, null, current_state + '#' + tabLabel); 
      }); 
     }, 
    }; 
}]); 

Answer 1

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

<tab select="tabSelected('tab1')" active="tabs.tab1"> 
    <tab select="tabSelected('tab2')" active="tabs.tab2"> 


    $scope.tabs = {tab1: false, tab2:false}; 
    $scope.tabSelected = function (whichTab) { 

     $scope.currentTab = whichTab; 
    }; 

    function setTabDisplayed() { 
     $scope.tabs[$scope.currentTab] = true; 
    }