angularjs uib-tabset 在 ui-bootstrap 2.5.0 下不工作

Question

为什么这段代码不起作用？通过单击按钮，它应该切换到选定的选项卡。
而这里的示例使用不同版本的 angularjs 和 bootstrap 工作：
Link:

下面这个新版本有什么问题？

var app = angular.module('app', ['ui.bootstrap']);

app.controller('TabCtrl', function($scope) {
  
$scope.tabs = [{active: true}, {active: false}, {active: false}];
$scope.go_tab1 = function() {
    $scope.tabs[1].active = true;
};
$scope.go_tab2 = function() {
    $scope.tabs[2].active = true;
};

});

   <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular-animate.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>

<body ng-app="app">
 <div ng-controller="TabCtrl">

  <uib-tabset class="tabbable">
        <uib-tab heading="my tab 0" ng-attr-active="tabs[0].active">
            <div class="row">

            <a class="btn btn-wide btn-azure" ng-click="go_tab1()">
            Go To tab 1
            </a>
            <a class="btn btn-wide btn-azure" ng-click="go_tab2()">
            Go To tab 2
            </a>
            </div>
        </uib-tab>
        <uib-tab heading="my tab 1" ng-attr-active="tabs[1].active">
            <div class="row">
            </div>
        </uib-tab>
        <uib-tab heading="my tab 2" ng-attr-active="tabs[2].active">
            <div class="row">
            </div>
        </uib-tab>
    </uib-tabset>
</div>
</body>

但是，相同的 angularjs 版本适用于 ui bootrap ui-bootstrap-tpls-0.14.3.js。这是为什么？

https://jsfiddle.net/234tpk75/2/

Answer 1

这是因为 ui-bootstrap 的更新版本中发生了很多变化。该工作的 jsfiddle 使用非常旧的 uib 0.14.3 版本，此后更改了许多语法，更新了指令。此外，您需要 tpls 版本，因为这些指令需要在 tpls 版本的库中可用的模板。

因此，在此更新版本中，您可以使用一个变量来存储活动选项卡索引，然后相应地更改其值。因此，您可以在 ui-tabset 指令上使用 active 属性存储活动变量的变量，并在每个 uib-tab.

上使用具有唯一值的 index 属性

<uib-tabset class="tabbable" active="activeTab">
  <uib-tab heading="my tab 0" index=0>
    <div class="row">
      <a class="btn btn-wide btn-azure" ng-click="go_tab1()">
        Go To tab 1
        </a>
      <a class="btn btn-wide btn-azure" ng-click="go_tab2()">
        Go To tab 2
        </a>
    </div>
  </uib-tab>
  <uib-tab heading="my tab 1" index=1>
    Tab 1
  </uib-tab>
  <uib-tab heading="my tab 2" index=2>
    Tab 2
  </uib-tab>
</uib-tabset>

控制器中只有：

  $scope.activeTab = 0;
  $scope.go_tab1 = function() {
    $scope.activeTab = 1;
  };
  $scope.go_tab2 = function() {
    $scope.activeTab = 2;
  };

Working plunker

详见official docs。

angularjs uib-tabset 在 ui-bootstrap 2.5.0 下不工作

angularjs uib-tabset not working under ui-bootstrap 2.5.0

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap

angular-ui-bootstrap-tab