在引导模式内的按钮单击事件中获取活动选项卡 ID答案

【问题标题】：get active tab id in button click event inside a bootstrap modal在引导模式内的按钮单击事件中获取活动选项卡 ID
【发布时间】：2016-01-09 22:00:35
【问题描述】：

我有一个 Angular js 引导模式窗口，其中有两个选项卡。页脚相同，如何识别活动选项卡的 id 并将其发送到我的提交按钮事件处理程序？

<div class="modal-body">
<tabset justified="true">
    <tab heading="One" id="one"></tab>
    <tab heading="Two" id="two"></tab>
</tabset>
</div>
<div class="modal-footer">
    <button ng-click="doSomething(activeTabId)">Submit</button>
</div>

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

您可以使用select() 而不是使用ng-click，这是angular-bootstrap 文档用于tab 选择的内容。要考虑的另一个注意事项是tabset 指令和tab 指令创建了一个隔离范围，因此，您需要将activeId 分配给该范围内的对象，以便在这些隔离指令中可以访问它。

注意：这是一个关于作用域的FAQ。

HTML

<body ng-controller="MyTabController">
  <tabset justified="true">
    <tab heading="One" id="one" select="tab.activeTabId = 1"></tab>
    <tab heading="Two" id="two" select="tab.activeTabId = 2"></tab>
  </tabset>
</body>

JAVASCRIPT

  .controller('MyTabController', function($scope, $window) {

    // store tab related data in a scope object
    // to avoid problems with isolated scopes
    $scope.tab = {};

  });

演示

angular.module('app', ['ui.bootstrap'])

  .controller('MyTabController', function($scope, $window) {

    $scope.tab = {};

    $scope.submit = function(activeId) {
      $window.alert(activeId);
    };

  });

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

<head>
  <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 data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
  <script data-require="angular-bootstrap@*" data-semver="0.13.3" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MyTabController">

  <tabset justified="true">
    <tab heading="One" id="one" select="tab.activeTabId = 1"></tab>
    <tab heading="Two" id="two" select="tab.activeTabId = 2"></tab>
  </tabset>

  <hr> active id: {{ tab.activeTabId }}
  <hr>
  <br>
  <button type="button" ng-click="submit(tab.activeTabId)" class="btn btn-primary btn-block btn-lg">
      Alert Active Id
    </button>

</body>

</html>

【讨论】：

来自 Angular UI Bootstrap 团队：很好的答案。我建议将“...you can use...”改为“...you should use...”