anglejs – Angular UI Bootstrap标签集包含

发布时间：2020-12-17 10:34:03 所属栏目：安全来源：网络整理

导读：我无法使用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尝试

我无法使用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.

和

10 $digest() iterations reached. Aborting!

FYI：模板主要是空的,不空的一个包含一个基本表.
我如何使其工作？

看起来你在使用ng-repeat时有额外的引号. ng-include =“’x.html’”中的额外引号仅在作为属性使用时才需要.

在JavaScript中将其指定为变量时,可以按如下方式在JavaScript中设置范围变量：$scope.someTemplateUrl =“x.html”;然后将属性设置为ng-include =“someTemplateUrl”.注意变量的值不包含单引号.

而第二个版本你应该做标签[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"
        },...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!