使用 angular ui bootstrap 显示选项卡 - tabsets

Question

我正在尝试使用 angular ui 创建 bootstrap 标签页。但是选项卡内容不会一次显示一个。并且标签之类的按钮不可见。

Jsfiddle 是@http://jsfiddle.net/qn8vcjwo/2/

标签集代码是，

<tabset>
  <tab heading="title one">this is tab number one</tab>
  <tab heading="title two">this is tab number two</tab>
  <tab heading="title three">this is tab number three</tab>
</tabset>

而且，我得到的错误是，

Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available

Answer 1

您需要将 'Framework and Extensions' 下的设置 'onLoad' 更改为 'No wrap - in head'。这会将您的代码放入 head 部分而不是运行它在 onLoad 事件中。参见 jsfiddle docs。 Angular 尝试在 DOMContentLoaded 事件上自动初始化您的应用程序，但您的应用程序尚未定义，因为 onLoad 尚未触发，这就是您收到错误的原因。

当您更新时，还有另一个问题。您已包含 UI Bootstrap 库，但该版本不包含默认模板。由于您当前没有定义自定义模板，因此您应该将库与模板一起包含在内。这只是使用 URL 而不是与模板捆绑在一起的问题：

https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js

Working fiddle here 如果需要

使用 angular ui bootstrap 显示选项卡 - tabsets

Display tabs using angular ui bootstrap - tabsets

javascript

twitter-bootstrap

angularjs

angular-ui-tabset