Question

我在ui-tab应用程序中使用angular。我有2个选项卡（tab1和tab2），我想在tab2中的按钮时以编程方式将tab1设置为活动的。

这是我的HTML代码：

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

这是goToTab1()实施：

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

我的问题：

当我单击按钮（在tab2中）时，选择了tab1，但显示的内容仍然是tab2内容。此外，当我点击tab2之后，没有任何事情发生，直到我再点击tab1然后如果我点击tab2就可以了。

修改

我已经尝试了issue中的解决方案，但我遇到了同样的问题。此外，当我直接在ng-click中更改活动值时，它根本没有效果

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

Answer 1

<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;
};

Answer 2

根据this question，你应该重构

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

要

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

我认为更好的方法是使用具有自己范围的视图/指令并根据active

隐藏/显示它们

angular-ui-tabset：更改活动标签内容

2 个答案: