Angular js - 仅使用 UI Bootstrap 的选项卡库

Angular js - Using UI Bootstrap's Tab library only

本文关键字：Bootstrap 选项 UI js Angular      更新时间：2023-09-26

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

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

普伦克

如果仅包含选项卡.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>
相关文章：