Angular js - 仅使用 UI Bootstrap 的 Tab 库答案

【问题标题】：Angular js - Using UI Bootstrap's Tab library onlyAngular js - 仅使用 UI Bootstrap 的 Tab 库
【发布时间】：2015-08-30 00:48:04
【问题描述】：

我只使用 UI Bootstrap 的 Tab 组件。

https://github.com/angular-ui/bootstrap/tree/master/src/tabs

包含上述库并添加以下代码后，浏览器中没有任何结果。控制台也没有错误。

var app = angular.module('app', ['ui.bootstrap.tabs']);

 <tabset justified="true">
    <tab heading="Justified">Justified content</tab>
    <tab heading="SJ">Short Labeled Justified content</tab>
    <tab heading="Long Justified">Long Labeled Justified content</tab>
  </tabset>

我已经设法使用具有相同上述代码的完整 UI-Bootstrap 库来完成这项工作。我不想包含整个库，因为我只使用 Tab 模块。

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

【问题讨论】：

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

您需要包含模板。 @Fieldset 有正确的想法，只是可能不是解决问题的最明确的建议。

Plunker

如果您只包含 tabs.js，请确保单独添加模板。您可以使用 $templateCache 脚本标签方法轻松做到这一点：

    <script type="text/ng-template" id="template/tabs/tabset.html">
      <div>
        <ul class="nav nav-{{type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
        <div class="tab-content">
          <div class="tab-pane" 
               ng-repeat="tab in tabs" 
               ng-class="{active: tab.active}"
               tab-content-transclude="tab">
          </div>
        </div>
      </div>
    </script>

    <script type="text/ng-template" id="template/tabs/tab.html">
      <li ng-class="{active: active, disabled: disabled}">
        <a href ng-click="select()" tab-heading-transclude>{{heading}}</a>
      </li>
    </script>

【讨论】：