Angular UI Bootstrap 选项卡集 + ng-include

我在使用 ng-include 设置具有动态内容的选项卡集时遇到问题。 我尝试使用 ng-repeat 失败：

<tabset justified="true">
    <tab ng-repeat="tab in tabs" heading="{{ tab.heading }}" active="tab.active">
         <div ng-include="tab.template"></div>
    </tab>
</tabset>

另外，我尝试不使用 ng-repeat ：

<tabset justified="true">
    <tab heading="{{ tabs.1.heading }}" active="tabs.1.active">
         <div ng-include="'partial/profile/template1.html'"></div>
    </tab>
    <tab heading="{{ tabs.2.heading }}" active="tabs.2.active">
         <div ng-include="'partial/profile/template2.html'"></div>
    </tab>
    <tab heading="{{ tabs.3.heading }}" active="tabs.3.active">
         <div ng-include="'partial/profile/template3.html'"></div>
    </tab>
    <tab heading="{{ tabs.4.heading }}" active="tabs.4.active">
         <div ng-include="'partial/profile/template4.html'"></div>
    </tab>
    <tab heading="{{ tabs.5.heading }}" active="tabs.5.active">
         <div ng-include="'partial/profile/template5.html'"></div>
    </tab>
</tabset>

然而，我得到的是一个空白页面，没有响应和这些错误：

WARNING: Tried to load angular more than once.

and

10 $digest() iterations reached. Aborting!

仅供参考：模板主要是空的，非空的模板包含一个基本表。 我该如何让它发挥作用？

看起来您在使用时有额外的引号ng-repeat。中的额外引号ng-include="'x.html'"仅当它用作属性时才需要。

在 JavaScript 中将其指定为变量时，可以按如下方式在 JavaScript 中设置作用域变量：$scope.someTemplateUrl = "x.html";然后将属性设置为ng-include="someTemplateUrl"。请注意，变量的值不包含单引号。

你应该做的第二个版本tab[0].heading而不是tab.0.heading（并且从 0 而不是 1 开始）。

我创建了一个包含工作版本的 Plunker，它似乎工作正常：

http://plnkr.co/edit/cL9RPB4otw57pORJqjvx?p=preview http://plnkr.co/edit/cL9RPB4otw57pORJqjvx?p=preview

我做了什么：

• 从模板属性中删除了额外的引号
• 删除了 html5Mode 因为 Plunker 不支持它。

所以像这样：

$scope.tabs = [
        {
            "heading": "Tab 1",
            "active": true,
            "template":"tab1.html"
        },
        ...