Angular UI Bootstrap tabset + ng-include - angularjs, angular-ui-bootstrap

Mam problem z ustawieniem zestawu tabulatorów z dynamiczną zawartością za pomocą polecenia ng-include. Bezskutecznie próbowałem z 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>

Próbowałem też bez 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>

Dostaje się jednak stronę blanck, nie odpowiadającą i te błędy:

WARNING: Tried to load angular more than once.

i

10 $digest() iterations reached. Aborting!

FYI: szablony są głównie puste, a ten, który nie jest pusty, zawiera tabelę podstawową. Jak mam to sprawić?

Odpowiedzi:

13 dla odpowiedzi nr 1

Wygląda na to, że podczas używania masz dodatkowe cytaty ng-repeat. Dodatkowe cytaty w ng-include=""x.html"" są potrzebne tylko wtedy, gdy są używane jako atrybut.

Podczas określania go jako zmiennej w JavaScript, ustawiasz zmienną zasięgu w JavaScript w następujący sposób: $scope.someTemplateUrl = "x.html"; następnie ustaw atrybut na ng-include="someTemplateUrl". Zauważ, że wartość zmiennej nie zawiera pojedynczych cudzysłowów.

I druga wersja powinnaś robić tab[0].heading zamiast tab.0.heading (i począwszy od 0 zamiast 1).

Stworzyłem Plunkera z działającą wersją i wygląda na to, że działa poprawnie:

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

Co ja zrobiłem:

• usunięto dodatkowe cytaty z właściwości szablonu
• usunięto html5Mode, ponieważ Plunker nie działa z tym.

Więc coś takiego:

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

---