Conjunto de tabulações Bootstrap da interface do usuário angular + ng-include - angularjs, angular-ui-bootstrap

Tenho problemas para configurar uma tabset com conteúdo dinâmico usando ng-include. Eu tentei sem sucesso com 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>

Além disso, tentei sem o 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>

No entanto, o que eu recebo é uma página em branco, não respondendo e esses erros:

WARNING: Tried to load angular more than once.

e

10 $digest() iterations reached. Aborting!

FYI: os modelos estão principalmente vazios, o que não está vazio contém uma tabela básica. Como posso fazer isso funcionar?

Respostas:

13 para resposta № 1

Parece que você tinha cotações extras ao usar ng-repeat. As citações extras em ng-include=""x.html"" são necessários apenas se forem usados ​​como um atributo.

Ao especificá-lo como uma variável em JavaScript, você define a variável de escopo em JavaScript da seguinte maneira: $scope.someTemplateUrl = "x.html"; em seguida, defina o atributo para ng-include="someTemplateUrl". Observe que o valor da variável não contém as aspas simples.

E a segunda versão que você deveria estar fazendo tab[0].heading ao invés de tab.0.heading (e a partir de 0 em vez de 1).

Eu criei um Plunker contendo uma versão de trabalho e parece funcionar corretamente:

http://plnkr.co/edit/cL9RPB4otw57pORJqjvx?p=preview

O que eu fiz:

• removeu as aspas extras da propriedade de modelo
• removeu o html5Mode porque o Plunker não funciona com isso.

Então, algo como:

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

---