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

爲什麼這段代碼不工作？通過點擊按鈕，它應該切換到選定的選項卡。
雖然這個例子在這裏與不同版本的angularjs和引導工作：
鏈接：
angularjs switch tab view using ui.bootstrap angularjs uib-tabset不能在ui-bootstrap下工作2.5.0

什麼是下面這個新版本的問題？

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/

來源

2017-08-05 Bonnard

這是因爲很多東西在UI的自舉的更新版本改變。這個工作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。

來源

2017-08-05 20:37:43 Shantanu

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

回答

相關問題