Question

版本：UI的自举-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文件中，即上述代码工作正常，即不从外部模板引用相同的代码。任何人都可以指导这里的问题是什么？控制台中没有错误。我已经尝试过模板，templatUrl，ng-include但没有任何效果。

Answer 1

你有一个错字。使用template-url属性代替templateUrl。

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

Plunker

Answer 2

我正在为自己的问题发布答案，因为它可能会帮助像我一样有新角色的人。

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

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

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

What is the correct syntax of ng-include?

uib-tabset未从外部模板加载

2 个答案: