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

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

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>

main.html：





tab1.html：
表1
something.html
某物

---

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

这实际上是一个非常常见的AngularJS问题，嵌套指令可以很好地处理这一问题。它工作得很好，实际上是AngularJS文档页面中的演示之一。这是最后一个例子，“创建通信指令”。您可以在这里看到完整的代码，但其思想是为选项卡组创建一个“container”指令，为内部内容创建一个“pane”指令。您的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>

你好
此内容位于第一个窗格中

世界
此内容位于第二个窗格中。

---

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

这实际上是一个相当常见的AngularJS问题，嵌套指令可以很好地处理。它工作得很好，实际上是AngularJS文档页面中的演示之一。这是最后一个例子，“创建通信指令”。您可以在这里看到完整的代码，但其思想是为选项卡组创建一个“container”指令，为内部内容创建一个“pane”指令。您的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>

你好
此内容位于第一个窗格中

世界
此内容位于第二个窗格中。

---

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

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

此选项卡可能包含哪些内容？ 什么将控制其显示

使用

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>

---

有关更多详细信息，请参阅此链接：

如其他示例中所指出的，有许多方法可以做到这一点。直接DOM操作实际上并不是考虑这种用例的角度。更好的思考方式可能是：

此选项卡可能包含哪些内容？ 什么将控制其显示

使用

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>

---

有关更多详细信息，请参见此链接：

有很多方法。你应该发布一个更具体的问题来得到一个好的答案（可能需要一些代码）。此外，考虑使用代替原代码<代码> Bootstrap 更好的角度积分。张贴一些代码。谢谢。我在下面贴了一个答案，但是我看得越多，我就越觉得你可能更想回顾Angular中的路由和模板。有很多方法可以做到这一点。你应该发布一个更具体的问题来得到一个好的答案（可能需要一些代码）。此外，考虑使用代替原代码<代码> Bootstrap 更好的角度积分。张贴一些代码。谢谢。我在下面贴了一个答案，但是我看得越多，我就越觉得你可能更想回顾Angular中的路由和模板。我的问题是：如果其中一个选项卡（如tab1）中有指向xyz.html的链接，单击该链接，您希望将tab1内容替换为xyz.html内容，该怎么办？我的问题是：如果其中一个选项卡（如tab1）中有指向xyz.html的链接，单击该链接，您希望将tab1内容替换为xyz.html，该怎么办内容？

ng如果

还不是稳定角度（1.0.8）的一部分。从1.2版开始提供。正如音乐上指出的，角度1.2版未包含在1.08版中。

ng如果

还不是稳定角度（1.0.8）的一部分。它从1.2版开始提供。正如音乐上所指出的，1.2版是有角度的，不包括在1.08版中。

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