在角度引导程序中设置初始静态选项卡答案

【问题标题】：Setting the initial static tab in angular bootstrap在角度引导程序中设置初始静态选项卡
【发布时间】：2015-06-07 22:38:34
【问题描述】：

我似乎无法在角度引导选项卡集中设置初始选项卡。它总是将最左边的选项卡设置为活动状态。

给定html：

<tabset>
    <tab heading="Static 1" active="data.static1">Static content</tab>
    <tab heading="Static 2" active="data.static2">Static content</tab>
</tabset>

和js：

angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
  $scope.data = {static1: false, static2: true}
};

见Plunker

2013 年 8 月 6 日更新：现已修复上游，请参阅 github issue。

【问题讨论】：

我添加了一个新答案，因为它在 0.6.0 版本中仍然是一个问题，并且这个问题在 google 中很高。

标签： angularjs angular-ui-bootstrap

【解决方案1】：

当指令运行时，（静态）选项卡似乎会覆盖传递给活动的任何内容。我认为这是一个错误。快速而肮脏，您可以使用 0 秒延迟的超时来设置活动状态。至少在 plunkr 中，这不会导致任何闪烁。在您的控制器中：

$scope.data = {};
$timeout(function() {
  $scope.data.static2 = true;  
}, 0)

http://plnkr.co/edit/3KbdKh?p=preview

【讨论】：

【解决方案2】：

angular-ui / bootstrap 到 0.6.0 的所有版本都存在问题：

http://plnkr.co/edit/73lm068buZf851h47FVQ?p=preview

它在你必须自己构建的bootstrap3 分支中工作：

http://plnkr.co/edit/uOASvZ71DzgZqODmHQP8?p=preview

【讨论】：

感谢您的信息。如果人们好奇pull#834 解决了这个问题。删除第 237-239 行是关键更改（我用这些更改修补了我的 angular ui 版本 - 我独立得出了相同的修复结论）。

【解决方案3】：

我今天遇到了这个问题，我发现解决它的最短方法是使用 ng-init 进行设置：

<tabset justified="true" ng-init="tabs[initialTab].isActive = true">
    <tab heading="Static 1" active="tabs.Inprogress.isActive"></tab>
    ...

【讨论】：

Arghhh - 谢谢，谢谢。我可以以编程方式选择除第一个选项卡之外的任何选项卡 - 使用 ng-init，即使第一个选项卡现在也可以使用。我已经失去了 2 个小时的尝试——太令人沮丧了！

【解决方案4】：

您的代码可以在最新版本的 ui-bootstrap 中运行（测试版本 0.7.0 到 0.13.0 包括在内）：
http://plnkr.co/edit/SzeTqXVSd8CiKL9nkjDC?p=preview

HTML：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.x" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
    <script data-require="ui-bootstrap@0.13.0" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="ExampleController as example">
    <tabset>
      <tab heading="Static 1" active="data.static1">Static content1</tab>
      <tab heading="Static 2" active="data.static2">Static content2</tab>
    </tabset>
  </body>

</html>

JavaScript：

angular.module("myApp", ["ui.bootstrap"])
  .controller("ExampleController", function ($scope) {
    $scope.data = {
      static1: false,
      static2: true
    };
  });

需要注意的一个问题是，如果将ngController 指令放在元素上，这将不起作用。在上面的代码中，我在元素上放置了ngController 指令。

【讨论】：