为什么这个片段不起作用？通过单击按钮，它应该切换到选定的选项卡。
而这里的示例使用不同版本的 angularjs 和 bootstrap 工作:
链接:
angularjs switch tab view using ui.bootstrap
下面这个新版本有什么问题？
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 。这是为什么？
最佳答案
这是因为 ui-bootstrap 的更新版本中发生了很多变化。该工作的 jsfiddle 使用非常旧的 uib 0.14.3 版本，此后许多语法发生了变化，指令也更新了。此外，您需要 tpls 版本，因为这些指令需要模板，该模板在库的 tpls 版本中可用。
因此，在此更新版本中，您可以使用一个变量来存储事件选项卡索引，然后相应地更改其值。因此，您可以在 ui-tabset 指令上使用 active 属性存储事件变量的变量，并在每个 uib 上使用具有唯一值的 .index 属性-tab
<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>
在 Controller 中只有:
$scope.activeTab = 0;
$scope.go_tab1 = function() {
$scope.activeTab = 1;
};
$scope.go_tab2 = function() {
$scope.activeTab = 2;
};
详细查看official docs .
关于javascript - angularjs uib-tabset 在 ui-bootstrap 2.5.0 下不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45525512/