javascript - angular-ui-tabset:更改事件选项卡内容

Question

我在我的 Angular 应用程序中使用 ui-tab。我有 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");
}

我的问题:

当我单击按钮(在选项卡2中)时，选项卡1被选中，但显示的内容仍然是选项卡2的内容。另外，当我点击 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;
};