1

I'm using ui-tab in my angular application. I have 2 tabs (tab1 and tab2) and I want to set tab1 as the active one programmatically when a button in the tab2.

This is my html code:

      <uib-tabset active="active"  justified="true">
        <uib-tab id="tab1" index="0" heading="Tab 1" ng-click="active= 0">
    <!-- content1 -->
        </uib-tab>
     <uib-tab id="tab2" index="1" heading="Tab 2" ng-click="active= 1">
    <!-- content2 -->
<button ng-click="goToTab1()"> Go to tab 1</button>
    </uib-tab>
  </uib-tabset>

And this is the goToTab1() implementation:

$scope.goToTab1 = function() {
            angular.element(document.querySelector("#tab1")).removeClass("active");
            angular.element(document.querySelector("#tab2")).addClass("active");
}

My problem:

When I click the button (in the tab2) the tab1 is selected but the displayed content still the tab2 content. Also when after that I click on the tab2, nothing happened until I click on the tab1 one more then if I click on the tab2 it works.

Edit

I have already tried the solution in that issue, but I'm getting the same problem. Also when I change the active value directly in the ng-click, it has no effect at all

<button ng-click="active = 0"> Go to tab 1</button>
Ne AS
  • 1,490
  • 3
  • 26
  • 58
  • https://stackoverflow.com/questions/39860391/angular-ui-bootstrap-tabs-cant-change-tabs-with-a-button-inside-a-tab – svarog May 31 '17 at 11:17
  • Possible duplicate of [Angular UI bootstrap tabs - Can't change tabs with a button inside a tab](https://stackoverflow.com/questions/39860391/angular-ui-bootstrap-tabs-cant-change-tabs-with-a-button-inside-a-tab) – svarog May 31 '17 at 11:17
  • @svarog I tried the answer in the issue that you gave me but it doesn't work – Ne AS May 31 '17 at 11:33
  • ok, then edit your question and add your second attempt, this way your question won't duplicate the other one and won't eventually close – svarog May 31 '17 at 11:43
  • @svarog check my edit please – Ne AS May 31 '17 at 11:46

2 Answers2

0
<uib-tabset active="current"  justified="true">
  <uib-tab id="tab1" index="0" heading="Tab 1" ng-click="current = 0">
    <!-- content1 -->
  </uib-tab>
  <uib-tab id="tab2" index="1" heading="Tab 2" ng-click="current = 1">
    <!-- content2 -->
    <button ng-click="goToTab1()"> Go to tab 1</button>
  </uib-tab>
</uib-tabset>

$scope.goToTab1 = function() {
  $scope.current = 0;
};
William Valhakis
  • 370
  • 2
  • 8
0

According to this question, you should refactor 

<button ng-click="active = 0"> Go to tab 1</button>

To

<button ng-click="$parent.$parent.active = 0"> Go to tab 1</button>

I think a better apprache would be to used views/directives with their own scopes and hide/show them according to active

svarog
  • 9,477
  • 4
  • 61
  • 77