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