Question

为什么此代码段不起作用？通过单击按钮，它应切换到选定的选项卡。
这里这个例子有不同版本的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。那是为什么？

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

Answer 1

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

因此，在此更新版本中，您可以使用一个变量来存储活动标签索引＆amp;然后改变它的价值。因此，您可以在active指令上存储ui-tabset属性存储活动变量的变量，并在每个index上使用uib-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>

在控制器中只有：

  $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

1 个答案: