角UI引导标签集+ NG-包括 [英] Angular UI Bootstrap tabset + ng-include
问题描述
我有麻烦设置与使用动态内容的标签集NG-包括。
我NG-重复失败尝试:
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>
另外,我想没有NG重复:
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.
和
10 $digest() iterations reached. Aborting!
FYI:模板主要是空的,一个不为空包含一个基本的表格。
我如何使它工作?
FYI: the templates are mainly empty, the one not empty contain a basic table. How am I to make it work ?
推荐答案
看起来你使用 NG-重复
时,有额外的引号。在额外的报价NG-包括='x.html'
时,才需要如果它作为一个属性。
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.
在其指定为在JavaScript中的变量,可以设置在JavaScript中范围的变量如下: $ scope.someTemplateUrl =x.html;
然后设置属性到 NG-包括=someTemplateUrl
。注意变量的值不包含单引号。
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.
和你应该做的第二个版本设置页[0] .heading
,而不是 tab.0.heading
(从0而不是1开始)。
And the second version you should be doing tab[0].heading
rather than tab.0.heading
(and starting from 0 rather than 1).
我已经创建了一个包含了一个工作版本Plunker,它似乎正常工作:
I've created a Plunker containing a working version and it seems to work correctly:
<一个href=\"http://plnkr.co/edit/cL9RPB4otw57pORJqjvx?p=$p$pview\">http://plnkr.co/edit/cL9RPB4otw57pORJqjvx?p=$p$pview
我做了什么:
- 删除从模板属性中的额外报价
- 删除html5Mode因为Plunker不与合作。
所以是这样的:
$scope.tabs = [
{
"heading": "Tab 1",
"active": true,
"template":"tab1.html"
},
...
这篇关于角UI引导标签集+ NG-包括的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!