Angular UI Bootstrap tabset + ng-include [英] Angular UI Bootstrap tabset + ng-include
问题描述
我在使用 ng-include 设置包含动态内容的标签集时遇到问题.我尝试使用 ng-repeat 失败:
<tab ng-repeat="tab in tabs" Heading="{{ tab.heading }}" active="tab.active"><div ng-include="tab.template"></div></tab></tabset>
另外,我尝试不使用 ng-repeat :
<tab header="{{ tabs.1.heading }}" active="tabs.1.active"><div ng-include="'partial/profile/template1.html'"></div></tab><tab header="{{ tabs.2.heading }}" active="tabs.2.active"><div ng-include="'partial/profile/template2.html'"></div></tab><tab header="{{ tabs.3.heading }}" active="tabs.3.active"><div ng-include="'partial/profile/template3.html'"></div></tab><tab header="{{ tabs.4.heading }}" active="tabs.4.active"><div ng-include="'partial/profile/template4.html'"></div></tab><tab header="{{ tabs.5.heading }}" active="tabs.5.active"><div ng-include="'partial/profile/template5.html'"></div></tab></tabset>
然而,我得到的是一个空白页面,没有响应和那些错误:
警告:尝试多次加载角度.
和
10 $digest() 迭代达到.中止!
仅供参考:模板主要是空的,非空的包含一个基本表.我该如何让它工作?
看起来您在使用 ng-repeat
时有额外的引号.ng-include="'x.html'"
中的额外引号仅在用作属性时才需要.
在 JavaScript 中将其指定为变量时,您在 JavaScript 中设置范围变量如下: $scope.someTemplateUrl = "x.html";
然后将属性设置为 ng-包括 =someTemplateUrl"
.注意变量的值不包含单引号.
第二个版本你应该做 tab[0].heading
而不是 tab.0.heading
(并且从 0 而不是 1 开始).>
我创建了一个包含工作版本的 Plunker,它似乎工作正常:
http://plnkr.co/edit/cL9RPB4otw57pORJqjvx?p=preview
我做了什么:
- 从模板属性中删除了多余的引号
- 移除了 html5Mode,因为 Plunker 不支持它.
比如:
$scope.tabs = [{"heading": "标签 1",活动":真实,模板":tab1.html"},...
I have trouble setting up a tabset with dynamic contents using ng-include. I tried unsuccessfully with 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>
Also, I tried without the 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>
Yet, what I get is a blanck page, not responding and those errors :
WARNING: Tried to load angular more than once.
and
10 $digest() iterations reached. Aborting!
FYI: the templates are mainly empty, the one not empty contain a basic table. How am I to make it work ?
Looks like you had extra quotes when using ng-repeat
. The extra quotes in ng-include="'x.html'"
are only needed if it's used as an attribute.
When specifying it as a variable in JavaScript, you set the scope variable in JavaScript as follows: $scope.someTemplateUrl = "x.html";
then set the attribute to ng-include="someTemplateUrl"
. Notice the value of the variable doesn't contain the single quotes.
And the second version you should be doing tab[0].heading
rather than tab.0.heading
(and starting from 0 rather than 1).
I've created a Plunker containing a working version and it seems to work correctly:
http://plnkr.co/edit/cL9RPB4otw57pORJqjvx?p=preview
What I did:
- removed the extra quotes from the template property
- removed html5Mode because Plunker doesn't work with that.
So something like:
$scope.tabs = [
{
"heading": "Tab 1",
"active": true,
"template":"tab1.html"
},
...
这篇关于Angular UI Bootstrap tabset + ng-include的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!