如何在使用 AngularJS 和 Bootstrap 的同一选项卡上更改选项卡的内容？

Question

使用 AngularJS 和 Bootstrap，假设有 3 个选项卡：tab1、tab2 和 tab3。每个选项卡上还有一些链接。例如，现在 tab1 处于活动状态。问题是：如何通过点击同一个标签内的链接来改变tab1的内容？

main.html:
<div class="tabbable">
  <ul class="nav nav-tabs">
    <li ng-class="{active: activeTab == 'tab1'}"><a ng-click="activeTab = 'tab1'" href="">tab1</a></li>
    <li ng-class="{active: activeTab == 'tab2'}"><a ng-click="activeTab = 'tab2'" href="">tab2</a></li>
    <li ng-class="{active: activeTab == 'tab3'}"><a ng-click="activeTab = 'tab3'" href="">tab3</a></li>
  </ul>
</div>
<div class="tab-content">
  <div ng-include="'/'+activeTab"></div>
</div>

tab1.html:
<h1>TAB1</h1>
<a href="/something">Something</a>

something.html
<h1>SOMETHING</h1>

现在的问题是如何在 tab1 处于活动状态时将 tab1 的内容更改为 something.html？

Answer 1

正如在其他示例中所指出的，有很多方法可以做到这一点。直接 DOM 操作并不是真正考虑这种用例的 Angular 方式。更好的思考方式可能是：

此选项卡可以包含哪些可能的内容？ 什么会控制它的显示？

使用ng-if 或ng-switch 指令允许您根据范围内定义的变量有选择地限制内容。

考虑这种可能性：

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li ng-class="{active: activeTab == 'tab1'}"><a ng-click="activeTab = 'tab1'" href="">tab1</a></li>
    <li ng-class="{active: activeTab == 'tab2'}"><a ng-click="activeTab = 'tab2'" href="">tab2</a></li>
    <li ng-class="{active: activeTab == 'tab3'}"><a ng-click="activeTab = 'tab3'" href="">tab3</a></li>
  </ul>
</div>

根据包含文件的代码，您可以这样做：

<div class="tab-content">
  <div ng-if="content==='A'" ng-include="'/'+activeTabA"></div>
  <div ng-if="content==='B'" ng-include="'/'+activeTabB"></div>
</div>

另一种方法是利用 ng-view 和路由。它比条件包含更复杂，但比编写一个全新的指令更简单。

简而言之，您可以像这样使用 ng-view 属性定义一个容器元素

<div ng-view></div>

然后像这样在你的 javascript 代码中设置一个路由表

$routeProvider.when('/tab1', {templateUrl: 'partials/tab1.html', controller: 'tab1Controller'});
$routeProvider.when('/tab2', {templateUrl: 'partials/tab2.html', controller: 'tab2Controller'});

更多详情见此链接：http://docs.angularjs.org/api/ngRoute.directive:ngView

Answer 2

这实际上是一个相当常见的 AngularJS 问题，并且可以通过嵌套指令很好地处理。它运行良好，实际上是 AngularJS 文档页面上Custom Directive Guide 中的演示之一。这是最后一个例子，“创建沟通的指令”。您可以在那里看到完整的代码，但想法是为选项卡组创建一个“容器”指令，并为内部内容创建一个“窗格”指令。你的 HTML 最终看起来像这样：

<my-tabs>
  <my-pane title="Hello">
    <h5 id="pane1">Hello</h5>
    <p>This content is in the first pane.</p>
  </my-pane>
  <my-pane title="World">
    <h5 id="pane2">World</h5>
    <em>This content is in the second pane.</em>
  </my-pane>
</my-tabs>

正如@musically_ut 在他的评论中指出的那样，有很多方法可以解决这个问题。这只是一种方法，但我认为效果很好。