Angular JS：Bootstrap选项卡显示不正确

Question

为什么选项卡不会与AngularJS tabbale指令一起显示。

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

这是angularJS的可选部分，在文档的任何地方都使用（here）

指令的来源是here。

我在doc站点中没有看到任何特殊的CSS。

编辑：

plunkr（上面）的标记是从上面给出的doc链接中复制的。 但是，当在Angular主页（angularjs.org）上尝试使用标记时，它可以正常工作。 不确定它在doc站点上的工作原理。 工作标记具有data-toggle属性，并且url片段到选项卡窗格。

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class=""><a href="#project-html" data-toggle="tab">index.html</a></li>
        <li class=""><a href="http://angularjs.org/#project-js" data-toggle="tab">project.js</a></li>
        <li class=""><a href="http://angularjs.org/#list-html" data-toggle="tab">list.html</a></li>
        <li class="active"><a href="http://angularjs.org/#detail-html" data-toggle="tab">detail.html</a></li>
        <li class=""><a href="http://angularjs.org/#mongolab-js" data-toggle="tab">mongolab.js</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="project-html">
            <h1>project</h1>
        </div>
        <div class="tab-pane" id="project-js">
            <h1>project js</h1>

        </div>
        <div class="tab-pane" id="list-html">
            <h1>project html</h1>

        </div>
        <div class="tab-pane active" id="detail-html">
        </div>
        <div class="tab-pane" id="mongolab-js">
        </div>
    </div>
</div>

Answer 1

必须在某处编写一些功能/代码才能使标签工作。目前，你所拥有的只是html和css（提供结构和样式），缺少行为部分（JS部分）。

在angular中，此行为是自定义编写的，并提供指令。在bootstap中，您需要包含js文件（bootstrap.js？）。然后有两种方法可以完成这项工作。要么在适当的位置包含文档中指定的data- *元素，要么在文档就绪调用中包含

$(".tabbable").tabs();

在你的JS代码中。这是你的掠夺者缺少的行为。