angularjs uib-tabset在ui-bootstrap 2.5.0下不起作用

Question

为什么此代码段无效？ 通过单击按钮，它应该切换到选定的选项卡。
而以下示例使用不同版本的angularjs和bootstrap进行工作：
链接：
使用ui.bootstrap的angularjs切换选项卡视图

下面的新版本有什么问题？

 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变量的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;
  };

工作塞

详细查看官方文档。

angularjs uib-tabset在ui-bootstrap 2.5.0下不起作用

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-08-05 20:37:43

angularjs uib-tabset在ui-bootstrap 2.5.0下不起作用

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-08-05 20:37:43

解决方案1
2 已采纳 2017-08-05 20:37:43