我无法使用ng-include设置动态内容的选项卡.
我尝试使用ng-repeat失败:
我尝试使用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" },...