Question

我只使用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

Answer 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>

Angular js - 仅使用UI Bootstrap的Tab库

1 个答案:

Plunker