1

为什么这个片段不起作用？通过单击按钮，它应该切换到选定的选项卡。
而这里的这个例子使用不同版本的 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/

4

1 回答 1

2

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

因此，在这个更新版本中，您可以使用一个变量来存储活动标签索引，然后相应地更改其值。因此，您可以在指令上拥有active活动变量的属性存储变量，并在每个上拥有具有唯一值的属性。ui-tabsetindexuib-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;
  };

工作的笨蛋

详细查看官方文档。

于 2017-08-05T20:37:43.620 回答