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

Ich habe Probleme beim Einrichten eines Tabsets mit dynamischen Inhalten mit ng-include. Ich habe erfolglos mit ng-repeat versucht:

<tabset justified="true">
<tab ng-repeat="tab in tabs" heading="{{ tab.heading }}" active="tab.active">
<div ng-include="tab.template"></div>
</tab>
</tabset>

Außerdem habe ich es ohne die ng-Wiederholung versucht:

<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>

Was ich bekomme, ist eine blanke Seite, die nicht antwortet und diese Fehler:

WARNING: Tried to load angular more than once.

und

10 $digest() iterations reached. Aborting!

Zu Ihrer Information: Die Vorlagen sind hauptsächlich leer, die nicht leeren enthalten eine Basistabelle. Wie soll ich es funktionieren lassen?

Antworten:

13 für die Antwort № 1

Sieht so aus, als hättest du bei der Verwendung zusätzliche Anführungszeichen ng-repeat. Die zusätzlichen Zitate in ng-include=""x.html"" werden nur benötigt, wenn es als Attribut verwendet wird.

Wenn Sie es als Variable in JavaScript angeben, legen Sie die Bereichsvariable in JavaScript wie folgt fest: $scope.someTemplateUrl = "x.html"; dann setze das Attribut auf ng-include="someTemplateUrl". Beachten Sie, dass der Wert der Variablen keine einfachen Anführungszeichen enthält.

Und die zweite Version, die Sie tun sollten tab[0].heading eher, als tab.0.heading (und ausgehend von 0 statt 1).

Ich habe einen Plunker erstellt, der eine funktionierende Version enthält und scheint korrekt zu funktionieren:

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

Was ich getan habe:

• Die zusätzlichen Anführungszeichen wurden aus der Schablonen-Eigenschaft entfernt
• html5Mode wurde entfernt, da Plunker damit nicht funktioniert.

So etwas wie:

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

---