Angular UI Bootstrap tabset + ng-include

时间:2014-10-21 15:19:16

标签: angularjs angular-ui-bootstrap

使用ng-include设置包含动态内容的tabset时遇到问题。 我尝试使用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.

10 $digest() iterations reached. Aborting!

仅供参考:模板主要是空的,非空的模板包含基本表。 我怎么能让它发挥作用?

1 个答案:

答案 0 :(得分:13)

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

我做了什么:

  • 从模板属性中删除了额外的引号
  • 删除了html5Mode,因为Plunker无法使用它。

类似于:

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