uib-tabset 未从外部模板加载

Question

版本：ui-bootstrap-tpls-2.5.0.min.js

我在加载外部 html 文件中定义的选项卡时遇到问题。在 index.html 文件中，我引用了在外部模板中定义的选项卡。

<div class="col-lg-12 col-xs-12 col-sm-12 col-md-12 no-padding" template="Scripts/tpl/optionTab.tpl.html" templateUrl="Scripts/tpl/optionTab.tpl.html" ></div>

我在文件 Scripts/tpl/optionTab.tpl.html

中定义了以下示例代码

<uib-tabset active="active">
<uib-tab index="0" heading="Static title">Static content</uib-tab>
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">
  {{tab.content}}
</uib-tab>
<uib-tab index="3" select="alertMe()">
  <uib-tab-heading>
    <i class="glyphicon glyphicon-bell"></i> Alert!
  </uib-tab-heading>
  I've got an HTML heading, and a select callback. Pretty cool!
</uib-tab>

如果我将上面的代码直接添加到 index.html 文件中，即没有从外部模板引用相同的代码，则上面的代码工作正常。任何人都可以请 guide 因为这里的问题是什么？控制台没有错误。我试过模板、templatUrl、ng-include，但没有任何效果。

Answer 1

您输入有误。使用 template-url 属性而不是 templateUrl.

template-url="Scripts/tpl/optionTab.tpl.html"

Plunker

Answer 2

我正在 post 回答我自己的问题，因为它可能会帮助像我这样 angular 的新手。

我不敢相信这是一个非常简单的解决方案，而且没有专家可以帮助指出正确的方向。我想要的只是将外部 html 文件中定义的 uib-tabset 包含到 index.html 中。我尝试了 uib-tabset 的选项，例如 template-url（似乎是错误，因为它没有选择外部文件并抛出诸如多个根元素等错误）。我尝试了 ng-include 但似乎没有任何效果。根据要求共享 plunker 等等 ultimatley 我发现以下是我在 index.html 中解决它所需要的全部内容。

 <div ng-include src="'Scripts/tpl/optionTab.tpl.html'"></div>

我在路径前遗漏了单引号，并且 angular 没有导入包含 uib-tabset 的部分 html，因为它试图将路径解析为变量。使用单引号将其视为字符串并且有效。感谢下面的 post 帮助。

What is the correct syntax of ng-include?

uib-tabset 未从外部模板加载

uib-tabset not loading from external template

angularjs

angular-ui-bootstrap